JavaScript

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には以下のコードを入力します。

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

  1. Vue.jsをインポート
  2. vue-scrolltoをインポート
  3. Vue.use()メソッドでVueアプリケーションでモジュールを使用できるようにする。第一引数にモジュールのオブジェクトを渡して、必要に応じて第二引数にオプションを渡す。

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が正常に動作するか確認してみましょう。

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

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

  1. 外部モジュールをインストールする(npm公式サイトから探す
  2. plugins/にモジュールの設定をする
  3. nuxt.config.jsのpluginsオプションにモジュールを登録する
筆者
筆者
以上、Nuxt.jsで外部モジュールを使う方法でした。