明けましておめでとうございます。
フロントエンドエンジニアリングを勉強する前はjQuery多用ユーザーだったので、VueではjQuery使わないの？えっじゃあアニメーションとかコーディングしなきゃいけないの！？と慌てふためく脆弱エンジニアでした。VueやNuxtではライブラリが充実しているんですね〜ありがたやありがたや。
というわけで、今回はNuxt.jsにスクロールアニメーションを実装します。ライブラリで。（倒置法）
参考サイト
https://michalsnik.github.io/aos/
https://zacheryng.com/nuxt-with-animated-on-scroll/
npm install aos --saveグローバルに使いたいので@/plugins/aos.jsに導入。
import Vue from 'vue'
import AOS from 'aos'
import 'aos/dist/aos.css'
Vue.use(
AOS.init({
once: true,
disable: window.innerWidth < 640,
duration: 750,
easing: 'ease-out-quart',
})
)nuxt.configに追記
plugins: [
{ src: "@/plugins/aos", mode: "client" },
],
purgeCSS: {
whitelist: ["aos-init", "aos-animate", "data-aos-delay", "data-aos-duration", "fade-up", "zoom-in"],
}描画。（vuetify使っているのでplacementValいらなかったです…）
<v-item-group>
<v-row>
<v-col v-for="item in serviceItems" :key="item.name">
<v-item
:data-aos="`${item.motionVal}`"
:data-aos-anchor-placement="`${item.placementVal}`"
>
<v-card
height="200"
class="d-flex align-center top_services_item"
>{{ item.name }}</v-card
>
</v-item>
</v-col>
</v-row>
</v-item-group>
<script>
export default {
data() {
return {
serviceItems: [
{
name: 'item1',
contents: 'ここに説明が入ります。',
placementVal: 'top-center',
motionVal: 'fade-up',
},
{
name: 'item2',
contents: 'ここに説明が入ります。',
placementVal: 'center-center',
motionVal: 'fade-down',
},
{
name: 'item3',
contents: 'ここに説明が入ります。',
placementVal: 'bottom-center',
motionVal: 'fade-up',
},
}
},
}
</script> 
![[Nuxt.js]FusionCharts導入覚書 – Vueフレームワーク編](https://nolyc.net/wp-content/uploads/2022/05/nuxtfusion.png)
