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

score 4 · Answer 1 · answered May 31 '22 at 11:45

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!

Thanks it helped, it's kinda vague in the docs how to handle window object — jofftiquez, Apr 22 '23 at 09:25

score 1 · Answer 2 · answered May 23 '22 at 21:06

1

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: tag => ['aos-vue'].includes(tag)
    }
  }
})

answered May 23 '22 at 21:06

Deiby Rodriguez

43
3

score 1 · Answer 3 · answered Mar 06 '23 at 03:05

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."

score 0 · Answer 4 · answered Nov 16 '22 at 15:38

0

I had a problem with AOS CSS, my app cannot find css file in aos. Then, I linked AOS with CDN. And, it helped:)

answered Nov 16 '22 at 15:38

Elzodxon Sharofaddinov

51
6

Using AOS with Nuxt3

4 Answers4