安装aos

npm install aos

通过plugins引入aos

在plugins目录下创建aos.js文件

import AOS from 'aos';
export default defineNuxtPlugin(() => {
  return {
    provide: {
      aos: () => AOS
    }
  }
})

然后在需要用到的页面引入

<script setup lang="ts">
const { $aos } = useNuxtApp()
onMounted(() => {
  $aos().init({
    easing: 'ease-out-back',
    duration: 1000
  })
});
</script>

<template>
  <div data-aos="fade-up" class="tw-w-40 tw-h-40 tw-bg-red-400 my-10" ></div>
  <div data-aos="fade-down" class="tw-w-40 tw-h-40 tw-bg-red-400 my-10" ></div>
  <div data-aos="fade-right" class="tw-w-40 tw-h-40 tw-bg-red-400 my-10" ></div>
  <div data-aos="fade-left" class="tw-w-40 tw-h-40 tw-bg-red-400 my-10" ></div>
  <div data-aos="fade-right" class="tw-w-40 tw-h-40 tw-bg-red-400 my-10" ></div>
</template>

到这还没效果，需要最后在nuxt.config.ts引入aos.css

css:[
  'aos/dist/aos.css',
],