Help us understand the problem. What is going on with this article?

Nuxt.jsにおけるプラグイン導入方法(初学者向けハンズオン)

More than 1 year has passed since last update.

はじめに

初学者向けにNuxt.jsにおけるプラグインの導入方法を今回書いてみました。npmインストールしたけど、「あれ?動かない?」と詰まった初学者は多いはず!(あれ、私だけ?:sweat_smile:...実は公式ページにちゃんと書いてあるんですが、当時はどういうことか理解できませんでしたww 今でこそわかりやすいと感じますが....)

Nuxtを新規で立ち上げて、そこにプラグインを導入する手順をハンズオン形式で進めていこうと思います。
ここでは、vue-flag-iconを例に進めていきます。

ハンズオン

1. nuxt.jsのインストール

既にプロジェクトをお持ちの方はここはスキップして頂いて構いません。サンプル用に新しくここでは作ってみました。

terminal.
$ npm create-nuxt-app sample

eslintやaxiosなどのインストールは各自で必要なものに合わせてください。ここでは全てnoにしておきます。

Screen Shot 2018-12-22 at 5.01.03.png

インストールが完了したら、対象のディレクトリに移動して立ち上げてみましょう。

terminal.
$ cd sample // ここではsampleという名前のディレクトリですのでそこに移動
$ npm run dev

Screen Shot 2018-12-22 at 2.45.32.png

無事にnuxtが立ち上がっているのが確認できました。

2. vue-flag-iconの確認

さあ、ここでは例としてvue-flag-iconを使ってみます。

Screen Shot 2018-12-22 at 2.48.05.png

Screen Shot 2018-12-22 at 2.48.16.png

どうやら<flag iso="it" />でフラグが表示できるようですね!!

以前作ったあるWebアプリの実用例をここでご紹介。

Screen_Shot_2018-12-22_at_2_54_39.png

こちらは以下のタグを利用した例です。

index.vue
<flag iso="us" /><flag iso="jp" />
<flag iso="eu" /><flag iso="jp" />
<flag iso="au" /><flag iso="jp" />

3. タグの記述

では、早速使ってみましょう!index.vueにタグを書きます。

Screen_Shot_2018-12-22_at_3_00_49.png

Screen Shot 2018-12-22 at 3.01.04.png

あれ?<flag iso="it" />を書きましたが、表示されません.....

そうもちろん、まだインストールをしていないからですね。
早とちりでしたwww

では、まずはプラグインのインストールから

4. npmインストール

ターミナルで対象のプラグインをインストール

terminal.
$ npm i --save vue-flag-icon

すると、きちんとpackage.jsonに追記されていますね

Screen_Shot_2018-12-22_at_3_05_56.png

この状態でもまだ表示はされません。

5. importと設定

https://github.com/vikkio88/vue-flag-iconに設定方法が書いてありますので、見てみましょう。

Screen Shot 2018-12-22 at 3.09.25.png

上記の設定が必要だそうで、index.vuescript内に追記します。

Screen_Shot_2018-12-22_at_3_10_26.png

しかし、このままではエラーが出て表示されません。

Screen Shot 2018-12-22 at 3.11.36.png

そうですね。このファイルでVueimportそして定義されていないですからね。
Vueimportしましょう
import Vue from 'vue'を追加します。

Screen_Shot_2018-12-22_at_3_12_44.png

これで確認してみましょう!
すると........

Screen_Shot_2018-12-22_at_3_13_51.png

おおー!表示されています!
他のフラグも増やしてみましょう!

Screen Shot 2018-12-22 at 3.16.33.png

5つくらいいけー!

Screen Shot 2018-12-22 at 3.16.38.png

うほーー!ちゃんとと国旗が表示されています!
(flag iso="eu" :squared="false"というように、squared属性をfalseにしておくと、長方形になってくれます)

これで、一応使えるのですが、このままではひとつ不便な点があります。それは、そのファイルごとに

import Vue from 'vue';
import FlagIcon from 'vue-flag-icon';
Vue.use(FlagIcon);

を記述しないといけないこと。今後コンポーネントが増えてくる場合に、いちいち全てのファイルにこの記述をするのは面倒です。どのファイルからでも<flag iso="eu">のように記述するだけで、使えた方が便利です。では、その設定を見てみましょう。

6. pluginsに設定

まず、pluginsディレクトリ直下にjsファイルを追加します。
ここでは、flag-icon.jsという名前でファイルを作成しておきます。
Screen Shot 2018-12-22 at 3.21.43.png

作成できましたら、そこに移動して、先ほどの設定を記述します。

Screen_Shot_2018-12-22_at_3_22_56.png

index.vueで書いた部分は消しておきましょう。

Screen_Shot_2018-12-22_at_3_12_44-2.png

次にこのpluginsに作成したファイルを全体で使えるように設定します。

7. nuxt.config.jsに追記

先ほど、pluginsに作ったflag-icon.jsファイルを読み込みます。
追加する場所はnuxt.config.jspluginsです。

Screen_Shot_2018-12-22_at_3_38_34.png

パスに気をつけてくださいね。

さて、ここで、ブラウザを確認してみましょう。

あれ....きちんと設定したはずなのに、エラーが出ています。

Screen Shot 2018-12-22 at 4.01.05.png

ここで注意点nuxt.config.jsは何か変更を加えた場合、一度サーバーを落として再起動する必要があります。

8. 再起動して確認

ですので、一度ターミナル部分で、ctrl + cで立ち上がっているプロジェクトを止めて、

terminal.
npm run dev

で再開します。

そして確認すると、

Screen Shot 2018-12-22 at 4.03.48.png

おお!エラーも解消されて、再びきちんと表示されています!
これで、他のコンポーネントなどからでも同じように、 <flag>タグが使えるようになりました。

最後に

ここで手順をおさらいします。

  1. npmでプラグインのインストール
  2. pluginsにファイルを作り、そこに読み込み記述
  3. nuxt.config.jspluginsに追加したファイルのパスを追記
  4. サーバーの再起動

いかがだったでしょうか?プログラミング始めて間もない方など、プラグインと聞いても導入方法がわからなかったりするので、その参考になればいいなと思います。

font-awesome-iconなど他のプラグインを入れる場合も同様の手順で導入が可能です。(element-uiなどnuxtをインストールする時にデフォルトで入れれる場合はそちらの方が楽ですね)


よくVueやNuxtの気になった記事など、呟いています。わからないことなどあれば気軽にメッセージで聞いてください:kissing_smiling_eyes:Twitter:@yohei_fujii1127

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした