Add class only on mobile - Vuejs and bootstrap

Question

I want to add a class only on mobile. I have done this before using vuetify however it seems more difficult with vue:

code:

<div class="{'mobileSnackBar': breakpoint.xs}">
  <p> This is my snackbar </p>
</div>

in vuetify you have the $vuetify.breakpoint.xs however how would i get a similar effect with bootstrap? Or please recommend an alternative.

Answer 1

With vuetify you can do:

computed: {
    is_screen_small() {
        return this.$vuetify.breakpoint.smOnly
    },
}

And combine it like this:

<div class="{'mobileSnackBar': is_screen_small}">
  <p> This is my snackbar </p>
</div>

Please make sure you read vuetify docs for breakpoints to know more.

However as I know with bootstrap the only way is to use media queries:

// Small devices 
@media (max-width: 760px) { 
  //Add your style here
 }

Though, there is a solution which is not related to bootstrap:

computed: {
  is_mobile() {
    const isMobile = window.matchMedia("only screen and (max-width: 760px)")
    return isMobile.matches ? true : false
  }
}

And combine it like :

<div class="{'mobileSnackBar': is_mobile}">
  <p> This is my snackbar </p>
</div>