Argthtjtr

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.

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>