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

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

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

Answer 2

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 3

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

Answer 4

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

Answer 5

I've found it pretty easy to get started, follow this steps and you're good to go

1- Install the package using yarn add -D aos or npm i --save aos

2- create aos.ts file in plugins folder and copy this into it

3- Restart the dev server

import AOS from 'aos';
import 'aos/dist/aos.css';
export default defineNuxtPlugin((nuxtApp) => {  
 if (typeof window !== 'undefined') {    
   nuxtApp.AOS = AOS.init();  
 }
});

That's it. Try to add data-aos="zoom-in" or any effect to a div and it'll work