document is not defined

[ghost]

The way I set it up is creating "created" in the App.vue component, and importing it as "import AOS from 'aos', and the animation works smooth. Upon hard reload in dev mode, I get a strange error message:

[Vue warn]: Error in created hook: "ReferenceError: document is not defined"

Haven't gotten this earlier in dev mode on vue projects. Perhaps there is a bug lurking around?

[amanbolat]

If you use aos in vuepress project you should put in Layout.vue(or any other layout file), not in enhanceApp.js.

       mounted() {
            setTimeout(() => {
                Aos.init({
                    duration: 1000
                })
            }, 1000)
        },

        updated() {
            setTimeout(() => {
                Aos.init({
                    duration: 1000
                })
            }, 1000)
        },

1. You can't put in created() because document is not available when rendering for server side.
2. You should wrap it with setTimeout or it will not trigger. (https://github.com/vuejs/vuepress/blob/master/packages/%40vuepress/plugin-medium-zoom/clientRootMixin.js)

[ghost]

If you use aos in vuepress project you should put in Layout.vue(or any other layout file), not in enhanceApp.js.

       mounted() {
            setTimeout(() => {
                Aos.init({
                    duration: 1000
                })
            }, 1000)
        },

        updated() {
            setTimeout(() => {
                Aos.init({
                    duration: 1000
                })
            }, 1000)
        },

1. You can't put in created() because document is not available when rendering for server side.
2. You should wrap it with setTimeout or it will not trigger. (https://github.com/vuejs/vuepress/blob/master/packages/%40vuepress/plugin-medium-zoom/clientRootMixin.js)

Thanks a lot, I'll try out your solution!

[Jayprecode]

How can we apply this in Next.js, i'm getting the same error

[Jayprecode]

How can we apply this in Next.js, i'm getting the same error

Never mind I've got that covered

[MunandarAris]

How can we apply this in Next.js, i'm getting the same error

Never mind I've got that covered

i have a solutions if you used Next js, you can place the import in _app.js and the init you can declaration in useEffect(() => { setTimeout(() => {AOS.init()},0) },[])

i am work if add this

[Jayprecode]

How can we apply this in Next.js, i'm getting the same error

Never mind I've got that covered

i have a solutions if you used Next js, you can place the import in _app.js and the init you can declaration in useEffect(() => { setTimeout(() => {AOS.init()},0) },[])

i am work if add this

thanks

[cubillagigante]

como podria solucionarlo en nuxt 3 js