How to listen to scroll events in vue nuxtjs?
Using window
or any other browser-specific API in created
or beforeCreate
will lead to problems because platform-specific APIs like document
or window
are not available on the server (where SSR happens). Instead, move the logic from created into beforeMount
. Leaving it in created and checking it via process.browser
would work as well but is not as clean and can lead to confusion easily.
export default {
methods: {
handleScroll () {
// Your scroll handling here
console.log(window.scrollY)
}
},
beforeMount () {
window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy () {
window.removeEventListener('scroll', this.handleScroll)
}
}
Only created
and beforeCreate
are executed on both sides, server and client. Therefore you don't need guarding ifs in beforeMount
or beforeDestroy
.
Further read about ssr-ready Vue components
window
is undefined because nuxt JS is server side rendered.
So try it using process.client
variable
methods: {
handleScroll () {
console.log(window.scrollY)
}
},
created () {
if (process.client) {
window.addEventListener('scroll', this.handleScroll);
}
},
destroyed () {
if (process.client) {
window.removeEventListener('scroll', this.handleScroll);
}
}
See link for more info