概要

スクロールアニメーションを簡単に実装できるAOSというライブラリをNuxtJSベースのサイトに導入しました。

その作業ログになります。

version情報

• version
  • “nuxt”: “^2.15.3”
  • “aos”: “^3.0.0-beta.6”

実装

install

% yarn add aos@next

plugins/aos.js

pluginを作成します。

import Vue from 'vue'
import AOS from 'aos'

Vue.use(
  AOS.init({
    once: true,
    disable: 'phone',
    duration: 750,
    easing: 'ease-out-quart',
  })
)

nuxt.config.js

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    // この行を追加します。 server側で動作しないように ssr: false に設定します。
    { src: '~/plugins/aos', ssr: false },
  ],

各ページでの記述

data-aos-* の属性をアニメーションしたいタグに付与します。

<template>
  <div>
    <h1 data-aos="fade-down">
      Your App Name
    </h1>
  </div>
</template>

以上です。
こちらでちゃんと動作するところまで確認できました。