【Nuxt.js】プラグイン導入【node_modulesで管理している場合】

#参考対象者

• 外部ライブラリをNuxt.jsに導入したい方
• npmでプラグイン等を管理している方

#環境

package.json

{
  "name": "nuxt-proj",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "nuxt": "^2.14.0"
  },
  "devDependencies": {}
}

#状況

外部ライブラリのvue-flag-iconを導入したいが、SyntaxErrorになってしまう。

SyntaxError
Cannot use import statement outside a module

#エラーにならない、プラグイン導入方法（node_modulesで管理）

1. プラグインをnpmで、インストール
2. pluginsディレクトリに、プラグインをimportするファイルを作成
3. nuxt.config.jsファイルに、importファイルを読み込む設定をする
4. サーバーの再起動

##プラグインをnpmで、インストール

まずは、今回のプラグインであるvue-flag-iconをインストールしていきます。

$ npm i vue-flag-icon@latest

すると自動でpackage.jsonにも記述されますね。

package.json

"dependencies": {
    "nuxt": "^2.14.0",
    "vue-flag-icon": "^1.0.6"
  },

##pluginsディレクトリに、プラグインをimportするファイルを作成

プラグイン公式（https://github.com/vikkio88/vue-flag-icon)
にもあるように、必要な記述を設定していきます。

そしてその設定は、どのファイルからでもライブラリを読み込めるように、pluginディレクトリというVue.jsをインスタンス化する前に読み込んでくれるJSファイルの置き場所に、新規ファイルでしていく。

plugins/flag-icon.js

import Vue from 'vue';                  //Vueを定義するために、Vueをimport
import FlagIcon from 'vue-flag-icon';
Vue.use(FlagIcon);

##nuxt.config.jsファイルに、importファイルを読み込む設定をする

あとは、先ほど設定したimportファイルを、Nuxt.js自体の設定ファイルに読み込む記述をする。

nuxt.config.js

export default {
  //省略
  plugins: [
    '@/plugins/flag-icon',
  ],
  //省略
}

ただ、これだけだとエラーになってしまう。
原因は、今回のライブラリの管理方法がnpmなので、さらに専用の設定が必要なため。

とは言っても、あと1行だけ追記すればいいのだが、

nuxt.config.js

export default {
  //省略
  build: {
    transpile: ['vue-flag-icon']
  }
}

これにて、ライブラリが使えるようになる。

##サーバーの再起動

と、よく忘れますが、nuxt.config.jsファイルに変更を加えた場合、サーバーの再起動をする必要があるので、

$ npm run dev

して実際に使ってみましょう！！

#実際に、使ってみる

どのVueファイルでも良いので、<flag iso="jp" />を追加してみると、

pages/index.vue

<template>
  <div>
    //省略
    <flag iso="jp" />    
  </div>
</template>

我らが日本の国旗が、表示されるであろう！

#参考

Nuxt.js公式様
https://ja.nuxtjs.org/guide/plugins/

@fj_yohei様
https://qiita.com/fj_yohei/items/cddf267a94fa30ecb0b8