プラグイン
Nuxtはplugins/ディレクトリ内のファイルを自動的に読み込み、Vueアプリケーションの作成時にロードします。
nuxt.configに個別に追加する必要はありません。.serverまたは.clientサフィックスを使用することで、サーバー側またはクライアント側のみでプラグインを読み込むことができます。登録済みプラグイン
ディレクトリのトップレベルにあるファイル（またはサブディレクトリ内のインデックスファイル）のみがプラグインとして自動登録されます。
-| plugins/
---| foo.ts // scanned
---| bar/
-----| baz.ts // not scanned
-----| foz.vue // not scanned
-----| index.ts // currently scanned but deprecated
foo.tsとbar/index.tsのみが登録されます。
サブディレクトリにプラグインを追加するには、nuxt.config.tsのpluginsオプションを使用できます。
export default defineNuxtConfig({
plugins: [
'~/plugins/bar/baz',
'~/plugins/bar/foz'
]
})
プラグインの作成
プラグインに渡される唯一の引数はnuxtAppです。
export default defineNuxtPlugin(nuxtApp => {
// Doing something with nuxtApp
})
オブジェクト構文プラグイン
より高度なユースケースのために、オブジェクト構文を使用してプラグインを定義することもできます。例えば
export default defineNuxtPlugin({
name: 'my-plugin',
enforce: 'pre', // or 'post'
async setup (nuxtApp) {
// this is the equivalent of a normal functional plugin
},
hooks: {
// You can directly register Nuxt app runtime hooks here
'app:created'() {
const nuxtApp = useNuxtApp()
// do something in the hook
}
},
env: {
// Set this value to `false` if you don't want the plugin to run when rendering server-only or island components.
islands: true
}
})
たとえば、
enforce: import.meta.server ? 'pre' : 'post'を設定すると、Nuxtがプラグインに対して行う将来の最適化が無効になります。 Nuxtは、オブジェクト構文を使用するときにフックリスナーを静的にプリロードするため、プラグインの登録順序を気にすることなくフックを定義できます。登録順序
ファイル名に「アルファベット順」の番号をプレフィックスすることで、プラグインの登録順序を制御できます。
plugins/
| - 01.myPlugin.ts
| - 02.myOtherPlugin.ts
この例では、02.myOtherPlugin.tsは01.myPlugin.tsによって注入されたすべてにアクセスできます。
これは、あるプラグインが別のプラグインに依存している場合に役立ちます。
10.myPlugin.tsは2.myOtherPlugin.tsの前に来ます。これが、例では1桁の数字に0をプレフィックスする理由です。読み込み戦略
並列プラグイン
デフォルトでは、Nuxtはプラグインを順番に読み込みます。プラグインをparallelとして定義することで、Nuxtはプラグインの実行が終了するまで待機せずに次のプラグインを読み込むことができます。
export default defineNuxtPlugin({
name: 'my-plugin',
parallel: true,
async setup (nuxtApp) {
// the next plugin will be executed immediately
}
})
依存関係のあるプラグイン
プラグインが実行される前に別のプラグインを待つ必要がある場合は、プラグインの名前をdependsOn配列に追加できます。
export default defineNuxtPlugin({
name: 'depends-on-my-plugin',
dependsOn: ['my-plugin'],
async setup (nuxtApp) {
// this plugin will wait for the end of `my-plugin`'s execution before it runs
}
})
コンポーザブルの使用
Nuxtプラグイン内では、コンポーザブルとユーティリティを使用できます。
export default defineNuxtPlugin((nuxtApp) => {
const foo = useFoo()
})
ただし、いくつかの制限と違いがあることに注意してください。
プラグインは順番に、そして他のすべてよりも前に呼び出されます。まだ呼び出されていない別のプラグインに依存するコンポーザブルを使用する可能性があります。
通常、Vue.jsコンポーザブルは現在のコンポーネントインスタンスにバインドされていますが、プラグインは
nuxtAppインスタンスにのみバインドされています。ヘルパーの提供
NuxtAppインスタンスでヘルパーを提供する場合は、プラグインからprovideキーの下で返します。
export default defineNuxtPlugin(() => {
return {
provide: {
hello: (msg: string) => `Hello ${msg}!`
}
}
})
その後、コンポーネントでヘルパーを使用できます。
<script setup lang="ts">
// alternatively, you can also use it here
const { $hello } = useNuxtApp()
</script>
<template>
<div>
{{ $hello('world') }}
</div>
</template>
コンポーザブルを使用することを強くお勧めします。refまたはcomputedを提供する場合、コンポーネントの<template>ではアンラップされません。これは、Vueがテンプレートのトップレベルではないrefをどのように扱うかによるものです。詳細については、Vueのドキュメントをご覧ください。
プラグインの型付け
プラグインからヘルパーを返すと、自動的に型付けされます。useNuxtApp()の戻り値とテンプレート内で型付けされていることがわかります。
useNuxtApp()を呼び出して型指定されたバージョンを取得できます。ただし、一般的には、プラグインの順序が確実でない限り、これは避けるべきです。高度なユースケースでは、次のように注入されたプロパティの型を宣言できます。
declare module '#app' {
interface NuxtApp {
$hello (msg: string): string
}
}
declare module 'vue' {
interface ComponentCustomProperties {
$hello (msg: string): string
}
}
export {}
@vue/runtime-coreを増やす必要がある場合があります。Vueプラグイン
Google Analyticsタグを追加するためにvue-gtagのようなVueプラグインを使用したい場合は、Nuxtプラグインを使用して行うことができます。
最初に、Vueプラグインの依存関係をインストールします。
npm install --save-dev vue-gtag-next
次に、プラグインファイルを作成します。
import VueGtag, { trackRouter } from 'vue-gtag-next'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueGtag, {
property: {
id: 'GA_MEASUREMENT_ID'
}
})
trackRouter(useRouter())
})
Vueディレクティブ
同様に、プラグインでカスタムVueディレクティブを登録できます。
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.directive('focus', {
mounted (el) {
el.focus()
},
getSSRProps (binding, vnode) {
// you can provide SSR-specific props here
return {}
}
})
})
~/plugins/my-directive.client.tsに移動し、~/plugins/my-directive.server.tsでサーバー用の「スタブ」ディレクティブを提供できます。