plugins

modules-servermiddleware-plugins-in-nuxt-js

plugins ディレクトリにはルート Vue.js アプリケーションがインスタンス化する前に実行する Javascript プラグインが含まれています。これは Vue プラグインを追加し、関数や定数を導入する場所です。Vue.use() を使用する必要がある時は都度 plugins/ ファイルを作成し、nuxt.config.jsplugins にそのパスを追加する必要があります。

外部パッケージ

サーバーとクライアント両方に HTTP リクエストを行うためには、アプリケーションで外部パッケージ/モジュール(著名な例は axios です)を使用することをお勧めします。

はじめに、npm か Yarn を介してインストールします。

yarn add @nuxtjs/axios
npm install @nuxtjs/axios

例えば、アプリケーション全体の API 呼び出しから発生する可能性のあるエラーに対応するよう、axios インターセプターを設定できます。この例では、API から 500 ステータスエラーが発生した時、sorry というカスタムエラーページにユーザをリダイレクトします。

plugins/axios.js
export default function ({ $axios, redirect }) {
  $axios.onError(error => {
    if (error.response.status === 500) {
      redirect('/sorry')
    }
  })
}

最後になりますが、モジュールと新しく作成したプラグインをプロジェクト構成に追加します。

nuxt.config.js
module.exports = {
  modules: ['@nuxtjs/axios'],
  plugins: ['~/plugins/axios.js']
}

そのあとページコンポーネントで直接使用できます:

pages/index.vue
<template>
  <h1>{{ post.title }}</h1>
</template>

<script>
export default {
    async asyncData ({ $axios, params }) {
      const  post  = await $axios.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
      return { post }
    }
}
</script>

Another way to use axios without installing the module is by importing axios direct in the <script> tag.

pages/index.vue
<script>
import axios from 'axios'

export default {
    async asyncData ({ params }) {
      const { data: post }  = await axios.get(`https://api.nuxtjs.dev/posts/${params.id}`)
      return { post }
    }
}
</script>

モジュールの外部でインポートステートメントを使用できない というエラーが発生した場合、プラグインを使用できるようにするために、webpack ローダーの nuxt.config.jsbuild > transpile オプションにパッケージを追加する必要があります。

nuxt.config.js
build: {
  // ここでwebpack設定を拡張できます
  transpile: ['npm-package-name'],
},

Vue Plugins

v-tooltip などの Vue プラグインを使用してアプリケーションにツールチップを表示する場合、アプリを起動する前にプラグインを設定する必要があります。

はじめにインストールをする必要があります

yarn add v-tooltip
npm install v-tooltip

次にファイル plugins/vue-tooltip.js を作成します

plugins/vue-tooltip.js
import Vue from 'vue'
import VTooltip from 'v-tooltip'

Vue.use(VTooltip)

plugins プロパティ

次に nuxt.config.jsplugins キー内にファイルパスを追加します。plugins プロパティを使用すると、簡単に Vue.js プラグインをメインアプリケーションに追加できます。plugins プロパティで定義されているすべてのパスは、メインアプリケーションを初期化する前にインポートされます。

nuxt.config.js
export default {
  plugins: ['~/plugins/vue-tooltip.js']
}

ES6 Plugins

プラグインが node_modules にあり、ES6 モジュールをエクスポートする場合、transpile ビルドオプションに追加する必要がある場合があります:

nuxt.config.js
module.exports = {
  build: {
    transpile: ['vue-tooltip']
  }
}

その他のビルドオプションについては、configuration buildのドキュメントを参照してください。

クライアント、またはサーバーサイドのみ

一部のプラグインは SSR がサポートされていないため、ブラウザのみで機能する場合があります。

従来のプラグインに名前を付ける

プラグインがクライアント、もしくはサーバーサイドのみで実行されると想定される場合、.client.js または .server.js は、プラグインファイルの拡張子として適用できます。ファイルはそれぞれの(クライアントまたはサーバー)サイドのみに自動的に含まれます。

nuxt.config.js
export default {
  plugins: [
    '~/plugins/foo.client.js', // クライアントサイドのみ
    '~/plugins/bar.server.js', // サーバーサイドのみ
    '~/plugins/baz.js' // クライアントとサーバー両方
  ]
}

オブジェクト構文

pluginsmode プロパティ('client' または 'server')でオブジェクト構文を使用することもできます。

nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/both-sides.js' },
    { src: '~/plugins/client-only.js', mode: 'client' }, // クライアントサイドのみ
    { src: '~/plugins/server-only.js', mode: 'server' } // サーバーサイドのみ
  ]
}

$root とコンテキストの挿入

これらの変数を Vue インスタンス(クライアントサイド)、コンテキスト(サーバーサイド)、さらには Vuex ストアに挿入できます。これらの関数の前に $ を付けるのが慣例です。

Nuxt.js はこれを簡単に行うための inject(key、value) メソッドを提供します。関数をエクスポートするとき、2 番目のパラメーターとして Inject が指定されます。$ は、キーの先頭に自動的に追加されます。

Vueインスタンスのライフサイクルでは、beforeCreate フックと created フックのみがクライアント、サーバーサイド両方から呼び出されることを把握しておくことが重要です。他のすべてのフックはクライアントサイドからのみ呼び出されます。

plugins/hello.js
export default ({ app }, inject) => {
  // Vue、コンテキスト、ストアに$hello(msg)を挿入します。
  inject('hello', msg => console.log(`Hello ${msg}!`))
}
nuxt.config.js
export default {
  plugins: ['~/plugins/hello.js']
}

$hello サービスは、ページ、コンポーネント、プラグイン、ストアアクションの contextthis にアクセスできるようになりました。

example-component.vue
export default {
  mounted() {
    this.$hello('mounted')
    // console.log 'Hello mounted!'
  },
  asyncData({ app, $hello }) {
    $hello('asyncData')
    // Nuxt <= 2.12 を使用する場合は 👇
    app.$hello('asyncData')
  }
}
store/index.js
export const state = () => ({
  someValue: ''
})

export const actions = {
  setSomeValueToWhatever({ commit }) {
    this.$hello('store action')
    const newValue = 'whatever'
    commit('changeSomeValue', newValue)
  }
}

Vue.use()Vue.component() を使用しないでください、またグローバルに、Nuxt インジェクション専用のこの関数に Vue を接続しないでください。サーバーサイドでメモリリークが発生します。

extendsPlugins プロパティ

プラグインを拡張したり、Nuxt.js によって作成されたプラグインの順序を変更したりすることができます。この関数は plugin オブジェクトの配列を受け入れ、プラグインオブジェクトの配列を返す必要があります。

プラグインの順序を変更する例:

nuxt.config.js
export default {
  extendPlugins(plugins) {
    const pluginIndex = plugins.findIndex(
      ({ src }) => src === '~/plugins/shouldBeFirst.js'
    )
    const shouldBeFirstPlugin = plugins[pluginIndex]

    plugins.splice(pluginIndex, 1)
    plugins.unshift(shouldBeFirstPlugin)

    return plugins
  }
}

グローバルミックスイン

グローバルミックスインは Nuxt プラグインで簡単に追加できますが、正しく処理しないとトラブルやメモリリークが発生する可能性があります。アプリケーションにグローバルミックスインを追加するときは、常にフラグを使用して複数回登録しないようにする必要があります:

plugins/my-mixin-plugin.js
if (!Vue.__my_mixin__) {
  Vue.__my_mixin__ = true
  Vue.mixin({ ... }) // ミックスインを設定する
}

間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する