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

【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

prum
エンジニアが日本で一番成長できる環境を作り続ける
https://www.prum.jp/
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