1、安装wowjs
pnpm i wowjs@1.1.3
2、node_modules复制wowjs代码
路径/node_modules/wowjs/dist/wow.js。不知道路径则查看node_modules/wowjs/package.json里面的main选项
2.1、在public文件夹创建wowjs.js文件
/public/wowjs.js
export default (callthis) => { // !!// 这是我们复制的wowjs自动调用函数,我们更改里面绑定的this(function() {// ...xxx}).call(callthis); // !! 这里传入上面的参数callthis
}
3、plugins创建插件文件wowjs.client.ts
路径/plugins/wowjs.client.ts。注意后缀名.client.ts不可更改
import wowjs from "public/wowjs.js"export default defineNuxtPlugin(() => {// 先绑定window,注意调用顺序不能错wowjs(window)// 再调用WOWnew WOW({animateClass: "animated",offset: 0,live: true,}).init();
})
4、配置nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({// ...// 引入全局csscss: ['wowjs/css/libs/animate.css', 'wowjs/css/site.css'],
});
5、测试
<div class=" wow fadeInUp" data-wow-duration="2s"></div>