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
nuxt.config.ts
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
vue: {
compilerOptions: {
isCustomElement: tag => ['aos-vue'].includes(tag)
}
}
})
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!