I am currently in the process of developing a Vue web application that needs to be functional on all devices. I have certain code that should only run on small screens or mobile devices. Right now, I am using an if statement with $(window).width() to achieve this, like so:
if ($(window).width() <= 768) {
//My mobile specific code
}
Is there a more efficient or vue-specific way to handle this?
Edit
For instance, in one component, my code looks like this:
export default {
data () {
return {
fade: false,
showFilter: $(window).width() > 768
}
},
components: { PrFilter, Pr },
created () {
if ($(window).width() <= 768) {
bus.$on('pr-changed', () => {
this.showFilter = false
this.fade = false
})
}
}
}
And in another component, I have the following:
watch: {
matchingPr: function (filteredPr) {
if (filteredPr.length) {
this.pr = filteredPr[0]
if ($(window).width() <= 768) {
bus.$emit('pr-changed')
}
}
}
},