I\'ve search for a solution and came up with this code
methods: {
handleScroll () {
console.log(window.scrollY)
}
},
created () {
window.addEventListen
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