プラグインとミドルウェア
Nuxt 2からNuxt 3のプラグインとミドルウェアに移行する方法を学びます。
プラグイン
プラグインの形式が変更され、引数は1つだけになりました(nuxtApp
)。
export default (ctx, inject) => {
inject('injected', () => 'my injected function')
})
移行
defineNuxtPlugin
ヘルパー関数を使用して、プラグインを移行します。plugins/
フォルダにあるnuxt.config
のplugins配列のエントリをすべて削除してください。このディレクトリのトップレベルにあるすべてのファイル(およびサブディレクトリのindexファイル)は自動的に登録されます。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')
}
}
Nuxt 2と同様に、~/middleware
フォルダに配置されたルートミドルウェアは自動的に登録されます。その後、コンポーネントで名前を指定して使用できます。ただし、これはコンポーネントオプションとしてではなく、definePageMeta
を使用して行われます。
navigateTo
は、多数のルートヘルパー関数の1つです。
移行
defineNuxtRouteMiddleware
ヘルパー関数を使用して、ルートミドルウェアを移行します。- グローバルミドルウェア(
nuxt.config
など)は、.global
拡張子を付けて~/middleware
フォルダに配置できます。例えば、~/middleware/auth.global.ts
です。
(メタタグ、ページとレイアウトへのリンク部分は、日本語で適切な内容に置き換える必要があります)