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

# はじめに
初学者向けにNuxt.jsにおけるプラグインの導入方法を今回書いてみました。npmインストールしたけど、「あれ？動かない？」と詰まった初学者は多いはず！(あれ、私だけ？:sweat_smile:...実は[公式ページ](https://ja.nuxtjs.org/guide/plugins/)にちゃんと書いてあるんですが、当時はどういうことか理解できませんでした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](https://qiita-image-store.s3.amazonaws.com/0/252687/811aaa75-77f2-0940-9f00-16f4ed5431d0.png)



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

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


![Screen Shot 2018-12-22 at 2.45.32.png](https://qiita-image-store.s3.amazonaws.com/0/252687/c5765b56-0ad9-7b0b-dc53-5038df32182d.png)


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

## 2. vue-flag-iconの確認

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

![Screen Shot 2018-12-22 at 2.48.05.png](https://qiita-image-store.s3.amazonaws.com/0/252687/aa3f6be3-3f99-87cb-8956-f57a7e89d19c.png)

![Screen Shot 2018-12-22 at 2.48.16.png](https://qiita-image-store.s3.amazonaws.com/0/252687/11e23f65-f79f-46f2-2982-957aa26c295c.png)



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

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

![Screen_Shot_2018-12-22_at_2_54_39.png](https://qiita-image-store.s3.amazonaws.com/0/252687/2dba93dd-a6cc-ce39-d3a8-91afa0f68c0f.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](https://qiita-image-store.s3.amazonaws.com/0/252687/13db0fd4-72fb-3d54-fb09-806bb7684a17.png)



![Screen Shot 2018-12-22 at 3.01.04.png](https://qiita-image-store.s3.amazonaws.com/0/252687/126cb5ad-29dc-84f5-af42-3f4b44178baa.png)


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

そうもちろん、<font color="red">まだインストールをしていないから</font>ですね。
早とちりでしたwww

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

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

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

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

![Screen_Shot_2018-12-22_at_3_05_56.png](https://qiita-image-store.s3.amazonaws.com/0/252687/b51408a6-d82a-5360-8f64-8eab957e649a.png)



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

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

![Screen Shot 2018-12-22 at 3.09.25.png](https://qiita-image-store.s3.amazonaws.com/0/252687/7958487a-f9bc-55c3-ca85-6855312e170e.png)


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

![Screen_Shot_2018-12-22_at_3_10_26.png](https://qiita-image-store.s3.amazonaws.com/0/252687/a9c3cc51-2815-43ca-95dd-de80ecea011c.png)



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

![Screen Shot 2018-12-22 at 3.11.36.png](https://qiita-image-store.s3.amazonaws.com/0/252687/145a9df2-d012-b5da-7d75-8d4b122151c5.png)


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


![Screen_Shot_2018-12-22_at_3_12_44.png](https://qiita-image-store.s3.amazonaws.com/0/252687/f52cde38-b8f3-bf55-bdc5-ad336c9dffdb.png)



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


![Screen_Shot_2018-12-22_at_3_13_51.png](https://qiita-image-store.s3.amazonaws.com/0/252687/6dac9f49-494b-c2f0-3dc6-9a083651fe8f.png)



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


![Screen Shot 2018-12-22 at 3.16.33.png](https://qiita-image-store.s3.amazonaws.com/0/252687/69cde0c6-222e-b642-17cd-fc825b5cc48f.png)

５つくらいいけー！

![Screen Shot 2018-12-22 at 3.16.38.png](https://qiita-image-store.s3.amazonaws.com/0/252687/cc6320a6-22a4-ed83-c357-08aff441bcc0.png)

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

これで、一応使えるのですが、<font color="red">このままではひとつ不便な点</font>があります。それは、そのファイルごとに

```
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](https://qiita-image-store.s3.amazonaws.com/0/252687/99e7f6f8-3bf9-6122-d005-68dcd55fc929.png)

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

![Screen_Shot_2018-12-22_at_3_22_56.png](https://qiita-image-store.s3.amazonaws.com/0/252687/88b2312a-b5f6-422b-23b5-aff1fe25ae87.png)



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

![Screen_Shot_2018-12-22_at_3_12_44-2.png](https://qiita-image-store.s3.amazonaws.com/0/252687/01a48f3c-bc45-71fc-2bd9-a6254135da65.png)


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

## 7. nuxt.config.jsに追記

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

![Screen_Shot_2018-12-22_at_3_38_34.png](https://qiita-image-store.s3.amazonaws.com/0/252687/9a65c3fe-3af8-474a-7df6-9fc18fbd1a05.png)



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

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

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

![Screen Shot 2018-12-22 at 4.01.05.png](https://qiita-image-store.s3.amazonaws.com/0/252687/729b81d3-def6-171b-d8ff-774648117366.png)

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

## 8. 再起動して確認

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

```terminal.
npm run dev
```
で再開します。



そして確認すると、


![Screen Shot 2018-12-22 at 4.03.48.png](https://qiita-image-store.s3.amazonaws.com/0/252687/8c681bc7-19ab-df4e-1230-3f04ce4b2263.png)




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

# 最後に
ここで手順をおさらいします。

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

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

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

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