Nuxt3遇见的坑（三）： Nuxt3 引入wow.js播放动画

首先下载wow.js @originjs/vite-plugin-commonjs

yarn add wow.js @originjs/vite-plugin-commonjs

配置文件中设置vite支持commonjs引入

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  vite: {
    plugins: [viteCommonjs()],
  }
  ...
})

在plugins文件下创建wow.client.ts，因为wow.js中有windows的使用，所以要加client，让nuxt在客户端渲染的时候才加载。

// plugins/wow.client.ts
import { defineNuxtPlugin } from '#app'
import 'animate.css'

export default defineNuxtPlugin(async (nuxtApp) => {
  if (process.client) {
    var WOW = require('wow.js')
    new WOW().init()
  }
})

在组件中使用动画,class中添加 wowo 加动画class

<template>
  <div class="container">
    <div
      class="introTuceInfo wow animate__fadeInUp"
      data-wow-duration="2s"
      v-for="(item, index) in props.spanList"
      :key="index"
    >
      {{ item }}
    </div>
  </div>
</template>

wow.js官网：https://wowjs.uk/
animate官网：https://animate.style/

2022/12/26
更新下，build之后，会出现require无法引入的问题，是在解决不了，直接放弃wow.js了，毕竟这个动画js太老了。转用scrollreveal.js了。对vue3比较支持。