I am in search of a method to implement responsive components in Vue.js (Nuxt).
I have developed this mix-in but encountering an error:
export const mediaQuery = {
data() {
return {
breakpoints: {
sm: 576,
md: 768,
lg: 992,
xl: 1200
},
windowWidth: 0,
currentBreakpoint: ''
}
},
created() {
if (process.browser) {
this.setWindowWidth()
this.setCurrentBreakpoint()
window.addEventListener('resize', () => {
this.setWindowWidth()
this.setCurrentBreakpoint()
})
}
},
computed: {
smPlus() {
return this.windowWidth >= this.breakpoints.sm
},
smMinus() {
return this.windowWidth < this.breakpoints.md
},
mdPlus() {
return this.windowWidth >= this.breakpoints.md
},
mdMinus() {
return this.windowWidth < this.breakpoints.lg
},
lgPlus() {
return this.windowWidth >= this.breakpoints.lg
},
lgMinus() {
return this.windowWidth < this.breakpoints.xl
},
xlPlus() {
return this.windowWidth >= this.breakpoints.xl
}
},
methods: {
setWindowWidth() {
this.windowWidth = window.innerWidth
},
setCurrentBreakpoint() {
if (this.windowWidth < this.breakpoints.sm) {
this.currentBreakpoint = 'xs'
} else if (
this.windowWidth >= this.breakpoints.sm &&
this.windowWidth < this.breakpoints.md
) {
this.currentBreakpoint = 'sm'
} else if (
this.windowWidth >= this.breakpoints.md &&
this.windowWidth < this.breakpoints.lg
) {
this.currentBreakpoint = 'md'
} else if (
this.windowWidth >= this.breakpoints.lg &&
this.windowWidth < this.breakpoints.xl
) {
this.currentBreakpoint = 'lg'
} else if (this.windowWidth >= this.breakpoints.xl) {
this.currentBreakpoint = 'xl'
}
}
}
}
The error I'm facing is: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.
I am seeking a solution for the above issue. How do we effectively utilize responsive components without directly using media queries?
Thank you