Add class only on mobile - Vuejs and bootstrap - vue.js

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>

Answer 2

Another way with bootstrap is to use the breakpoint classes to show/hide elements, something like this:
<div class="mobileSnackBar d-sm-none">
<p> This is my snackbar </p>
</div>
<div class="d-none d-sm-block">
<p> This is my snackbar </p>
</div>
Makes more sense with components rather than html, and maybe even then not the cleanest solution, but it does work.