プラグインとミドルウェア
Nuxt 2 から Nuxt 3 のプラグインとミドルウェアへの移行方法を学びます。
プラグイン
プラグインの形式が変更され、引数は 1 つ (nuxtApp) のみとなりました。
export default (ctx, inject) => {
inject('injected', () => 'my injected function')
}
export default defineNuxtPlugin((nuxtApp) => {
// now available on `nuxtApp.$injected`
nuxtApp.provide('injected', () => 'my injected function')
// You can alternatively use this format, which comes with automatic type support
return {
provide: {
injected: () => 'my injected function',
},
}
})
移行
defineNuxtPluginヘルパー関数を使用するようにプラグインを移行してください。app/plugins/フォルダ内にあるnuxt.configプラグイン配列のエントリをすべて削除してください。このディレクトリのトップレベルにあるすべてのファイル(およびサブディレクトリ内のインデックスファイル)は自動的に登録されます。modeをclientまたはserverに設定する代わりに、ファイル名でこれを示すことができます。例えば、~/plugins/my-plugin.client.tsはクライアントサイドでのみ読み込まれます。
ルーティングミドルウェア
ルーティングミドルウェアの形式が変更されました。
export default function ({ store, redirect }) {
// If the user is not authenticated
if (!store.state.authenticated) {
return redirect('/login')
}
}
export default defineNuxtRouteMiddleware((to, from) => {
const auth = useState('auth')
if (!auth.value.authenticated) {
return navigateTo('/login')
}
})
Nuxt 2 と同様に、~/middleware フォルダに配置されたルーティングミドルウェアは自動的に登録されます。その後、コンポーネントで名前を指定して使用できます。ただし、これはコンポーネントオプションとしてではなく、definePageMeta で行われます。
navigateTo は、多くのルーティングヘルパー関数の一つです。
移行
defineNuxtRouteMiddlewareヘルパー関数を使用するようにルーティングミドルウェアを移行してください。- 任意のグローバルミドルウェア(
nuxt.configのようなもの)は、.global拡張子を付けて~/middlewareフォルダに配置できます。例えば、~/middleware/auth.global.tsのようになります。