Nuxt.jsでSal.jsを使う方法(裏道)

最近Nuxt.jsを使い、SPAを作り始めた者です。
そもそも、Webページ制作自体あまりしたことがなかったため、何かするたびに壁に当たり大変だったので、ここに書いて忘れないようにしたいと思います。
（他の初心者の方も参考になったら嬉しいです。）

今回は、制作しているWebページをもっとリッチな感じにしたいと思い、スクロールに連動してオブジェクトにアニメーションを付与してくれる、「Sal.js」を導入してみようとしました。
https://mciastek.github.io/sal/
（友達に教えてもらいました）

導入編(失敗)

まず、

npm install --save sal.js

をして、プラグインをインストールしてみました。
そして、

npm run dev

をすると

Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: D:\[省略]\.nuxt\client.js: Cannot read property 'node' of undefined

というエラーが出て、ビルドに失敗しました...。

別の方法で導入(失敗)

色々調べたりいじったりしたのですが、すぐに解決は出来なかったので、一旦諦め、別の方法でcssとjsを導入してみることにしました。

以下のサイト
Nuxtのサードパーティ製Javascriptの読み込む方法を色々試してみた
https://zenn.dev/sengosha/articles/54ec4c57194626
によると、直接headに入れる方法と、pluginで読み込む方法があるとのことでしたので、とりあえず簡単なheadに入れる方法を試してみました。

nuxt.config.js

  head: {
    link: [
      { rel: 'stylesheet', type: 'text/css', href: 'sal.css' },
    ],
    script:[
      { src: 'sal.js', defer: true ,
      },
    ]
  },

Sal.jsを導入しようとしたnuxtのコンポーネントは以下になります。

header.vue

<template>
  <div>
    <b-container fluid class ="parent">
      <!-- <b-row  cols="1" cols-sm="2" cols-md="4" cols-lg="6"> -->
      <b-row class="vh-100 text-center" align-v="center">
        <b-col cols="12" data-sal="slide-up"
          data-sal-duration="1000"
          data-sal-delay="300"
          data-sal-easing="ease-out-bounce"
        >
          <img src="~static/images/logo_a.png" class="logo" alt="a">
          <img src="~static/images/logo_b.png" class="logo" alt="b">
          <img src="~static/images/logo_c.png" class="logo" alt="c">
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

これで、動かしてみたところ、なぜかアニメーション効果を適用したオブジェクトがフェードアウトされて消えてしまい、その後リロードしてもそのオブジェクトは表示されませんでした。

salの初期化

以下のSal.jsのgithub内のリファレンスを確認したところ、
https://github.com/mciastek/sal#repeating-animation
salの初期化が必要なこと、初期化時のオプションでonceをfalseにしないといけないことが分かりました。
(onceをfalseにしないと、アニメーションが1度しか再生されないようです。)

上記を踏まえ、nuxt.config.jsを以下のように修正しました。

nuxt.config.js

  head: {
    link: [
      { rel: 'stylesheet', type: 'text/css', href: 'sal.css' },
    ],
    script:[
      { src: 'sal.js', defer: true ,
        callback: () =>{
          sal({
            once: false
          });
        },
      },
    ]
  },

以上、Nuxt.jsにSal.jsを導入する方法(裏道)でした。
いい方法があったり、そもそも最初の導入時になぜ失敗したかわかる方が居ましたらご教授いただけると嬉しいです。