Nuxt Nation カンファレンスが開催されます。11月12日~13日にご参加ください。

プラグインとミドルウェア

Nuxt 2からNuxt 3のプラグインとミドルウェアに移行する方法を学びます。

プラグイン

プラグインの形式が変更され、引数は1つだけになりました(nuxtApp)。

export default (ctx, inject) => {
  inject('injected', () => 'my injected function')
})
ドキュメント > ガイド > ディレクトリ構造 > プラグインで詳細をご覧ください。
nuxtAppの形式について詳細をご覧ください。

移行

  1. defineNuxtPluginヘルパー関数を使用して、プラグインを移行します。
  2. plugins/フォルダにあるnuxt.configのplugins配列のエントリをすべて削除してください。このディレクトリのトップレベルにあるすべてのファイル(およびサブディレクトリのindexファイル)は自動的に登録されます。modeclientまたは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つです。

ドキュメント > ガイド > ディレクトリ構造 > ミドルウェアで詳細をご覧ください。

移行

  1. defineNuxtRouteMiddlewareヘルパー関数を使用して、ルートミドルウェアを移行します。
  2. グローバルミドルウェア(nuxt.configなど)は、.global拡張子を付けて~/middlewareフォルダに配置できます。例えば、~/middleware/auth.global.tsです。

(メタタグ、ページとレイアウトへのリンク部分は、日本語で適切な内容に置き換える必要があります)