Nuxt.jsでモジュール（vue-scrollto）を使う方法

課題を持った人

Nuxt.jsで外部モジュールを使いたいです。方法を教えてください。

筆者

わかりました。今回はvue-scrollto（要素をクリックするとスクロールしながら指定の場所まで移動する）の導入方法を例に見ていきましょう。

Nuxt.jsのインストールがまだの方は、こちらの記事を参考にインストールしていただき、実際に手を動かしながら進めるとわかりやすいと思います。

vue-scrolltoをインストールする

まず、npmからパッケージをインストールします。上がyarnを使っていストールするためのコマンドで、下がnpmを使ってインストールするためのコマンドです。

pluginsディレクトリにvue-scrollto.jsを作成する

次に、plugins/に、vue-scrollto.jsを作成します。vue-scrollto.jsには以下のコードを入力します。

基本的に下記の手順で書いていきます。

nuxt.config.jsのpluginsオプションにvue-scrolltoを登録する

最後に、どのページからもvue-scrolltoを使用できるようにnuxt.config.jsのpluginsオプションにvue-scrolltoを登録します。

他のモジュールを登録する場合は、モジュールをカンマで区切って次のように書きます。下記の例ではvue-lazyloadをオブジェクトの形で登録しています。オブジェクトのプロパティはモジュールファイルのパスを書くsrcとプラグインタイプを指定するためのmode（値は、clientまたはserver）があります。詳しくはNuxt.js公式サイトをご確認ください。

以上で設定は完了です。

vue-scrolltoの動作確認をする

pages/のvueファイルに下記のコードを追加して、vue-scrolltoが正常に動作するか確認してみましょう。

「出発」の文字をクリックすると、「到着！」の文字までスクロール移動したら成功です。

外部モジュールを使い方をまとめておきます。

筆者

以上、Nuxt.jsで外部モジュールを使う方法でした。