Looking to set up a custom breakpoint system for my Nuxt/Vuetify project so I can easily manage it from one centralized location instead of using $vuetif.breakpoint..... etc
To achieve this, I have created a plugin file named mobile.js. While it functions properly, I have noticed that it is slower than the standard breakpoints.
For example,
<span v-if="mobile"><show</span>
<span v-if="$vuetify.breakpoint.smAndDown"><show</span>
Both lines work as expected, but the first line (the mobile plugin) has a delay. I am looking to optimize my plugin for faster performance.
This is my current plugin (mobile.js)
import Vue from 'vue'
const mobilex = {
data() {
return {
mobile: false,
}
},
beforeDestroy() {
if (typeof window !== 'undefined') {
window.removeEventListener('resize', this.onResize, { passive: true })
}
},
mounted() {
this.onResize()
window.addEventListener('resize', this.onResize, { passive: true })
},
methods: {
onResize() {
this.mobile = window.innerWidth < 960
},
},
}
Vue.mixin(mobilex)
In nuxt.config.js
plugins: [ '~/plugins/mobile' ],