将 AOS 与 Nuxt3 结合使用

Question

有人已经在 Vue3 中使用过 AOS 或 vue-aos 包吗？

尽管禁用了配置，但我还是收到了一堆错误，可能是由于 ssr （Vue 未定义，文档未定义）所致。

nuxt.config.ts

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

插件/aos.ts

import VueAOS from "vue-aos"

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

我尝试了这种方式，我尝试了使用cdn文件的方式（但它导致使用.init（）时未定义AOS并且两者都不起作用。每个关于AOS的教程都与Nuxt2相关。

我还尝试将vue-aos包放在 nuxt 配置上的 build.transpile 上，但没有成功。

多谢

Answer 1

我也遇到了 AOS 在 Nuxt3 中无法工作的问题。

对我来说，解决方案是将 NuxtConfig 中的插件设置为客户端模式，如下所示：

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

之后我得到一个问题文档未定义。这是因为当窗口未定义时，无法找到文档。

我使用插件文件夹中 aos.ts 文件中的以下代码修复了此问题：

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
  }
})

我希望这也对你有用！