29.Mar.2021

AOSをNuxtJSのサイトに導入する

nuxtjs vuejs

概要

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

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

version情報

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

実装

install

% yarn add [email protected]

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>

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

Related Activities

Nuxt.jsからNext.jsへのリニューアルを経て思うこと

Nuxt.jsからNext.jsへフルリニューアルしたことで見えてきた個人的なメリットとデメリットを整理します

NuxtJSにEditor.jsを導入

リッチでカスタマイズが自由なテキストエディタであるEditor.jsをNuxtJSのサイトに導入しました。

AOSをNuxtJSのサイトに導入する

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

[Javascript]Web Share APIを使って共有ボタンを実装

Navigator.shareを使ってサイトの共有ボタンを実装しました。