Nuxt.jsでAnimate.cssをcdn経由で使う方法

はじめに

Nuxt.js に Animate.css を導入するための方法です。
すでに Nuxt.js の環境構築などを終えられている方が対象です。

他にも、cdn を使って何かを読み込ませたい人のプラスになるかもしれません。

早速本題

• head タグの中にいろいろ書き込みたいので、head メソッドを使います。

import Loading from "@/components/Loading"; //追加

  export default {
// 省略
    head() {
      return {
        link: [{
          rel: "stylesheet",
          href: "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
        }]
      }
    }

これだけです。
default.vueファイルなどに以上の記述をしていただければ、class 名のところに Animate.css の記述を書くだけでいろんな動きをしてくれます。
例）class = "animate__animated animate__slideInDown"

Animate.css に限らず、他の外部リソースを使う時にも応用できるかと思います。
自分がやろうとした時に、以下の参考記事にたどり着くまでに時間がかかったので、まとめてみました。

参考

NUXT JS 外部リソースを使うには？