Using AOS with Nuxt3

Question

Anyone already used AOS or vue-aos package with Vue3?

I'm getting bunch of errors due probably to ssr (Vue is not defined, document is not defined) despite disabling in on config.

nuxt.config.ts

export default defineNuxtConfig({
  plugins: [
    { src: '~/plugins/aos', mode: 'client', ssr: false }
  ],
}}

plugins/aos.ts

import VueAOS from "vue-aos"

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(VueAOS)
})

I tried this way, I tried the way with cdn files (but it leads to AOS is not defined when using .init() and both doesn't work. Every tutorial about AOS is related to Nuxt2.

I also tried to put vue-aos package on build.transpile on nuxt config without success.

Thanks a lot

Answer 1

I also suffered with this problem of AOS not working in Nuxt3.

For me the sollution was to set the plugin in NuxtConfig to mode client like below:

plugins: [{ src: "@/plugins/aos", ssr: false, mode: "client" }],

After that I get a problem document is not defined. This was because when the window is not defined, the document can't be found.

I fixed this with the code below in the aos.ts file in the plugins folder:

import AOS from "aos"

import "aos/dist/aos.css"

export default defineNuxtPlugin((nuxtApp) => {
  if (typeof window !== "undefined") {
    nuxtApp.AOS = AOS.init() // eslint-disable-line new-cap
  }
})

I hope this will work for you also!

Answer 2

From the Nuxt docs:

All plugins in your plugins/ directory are auto-registered, so you should not add them to your nuxt.config separately.

So with "nuxt": "^3.1.1" I just put

import AOS from 'aos'

import 'aos/dist/aos.css'

export default defineNuxtPlugin((nuxtApp) => {
    if (typeof window !== 'undefined') {
        nuxtApp.AOS = AOS.init()
    }
})

in a plugins/aos.client.ts file.

From the same docs: "You can use .server or .client suffix in the file name to load a plugin only on the server or client side."