Nuxt 3 Release Candidate がリリースされました! v3.nuxtjs.org で詳細について見れます。

翻訳されたページ このページのコンテンツは古い可能性があります。

コンテキスト

context は、Nuxt から Vue コンポーネントに追加のオブジェクト/パラメータを提供し、asyncData fetch plugins middleware そして nuxtServerInit のような特別な Nuxt ライフサイクル内で使用できます。


注意: ここで言う "コンテキスト" と、Vuex のアクション の中で使用できる context オブジェクトを混同しないでください。2 つは無関係です。

function (context) {
  // ユニバーサルなキー
  const {
    app,
    store,
    route,
    params,
    query,
    env,
    isDev,
    isHMR,
    redirect,
    error,
    $config
  } = context
  // サーバーサイド
  if (process.server) {
    const { req, res, beforeNuxtRender } = context
  }
  // クライアントサイド
  if (process.client) {
    const { from, nuxtState } = context
  }
}

ユニバーサルなキー

これらのキーは、クライアントサイドとサーバーサイドの両方で使用できます。

app

app (NuxtAppOptions)

すべてのプラグインを含むルート Vue インスタンスのオプション。たとえば i18n を使用している場合は context.app.i18n$i18n にアクセスできます。

store

store (Vuex Store )

Vuex の Store インスタンス。Vuex ストア が設定されている場合のみ使用できます

route

route (Vue Router Route )

Vue Router の route インスタンス。

params

params (Object)

route.params のエイリアス。

query

query (Object)

route.query のエイリアス。

env

env (Object)

nuxt.config.js で設定された環境変数。env API を参照してください。

isDev

isDev (Boolean)

開発モードであるかどうかを示す真偽値で、本番環境で一部のデータをキャッシュするのに役立ちます。

isHMR

isHMR (Boolean)

メソッド/ミドルウェアが webpack の hot module replacement から呼び出されたかどうかを示す真偽値(開発モードのクライアントサイドでのみ true)。

redirect

redirect (Function)

ユーザーを別のルートにリダイレクトするには、このメソッドを使用してください。ステータスコードはサーバーサイドで使用され、デフォルトは 302 です。 redirect([status,] path [, query])

例:

redirect(302, '/login')
redirect({ name: 'slug', params: { slug: mySlug } })
redirect('https://vuejs.org')

Location プロパティの詳細については、Vue Router のドキュメント を参照してください。

ハイドレーションエラー(クライアントの内容が、サーバーが返すものと異なってしまう)のため、クライアントサイド限定の Nuxt プラグイン の中では redirecterror を使用することはできません。有効な回避策は、window.onNuxtReady(() => { window.$nuxt.$router.push('/your-route') }) を使用することです。

error

error (Function)

エラーページを表示するには、このメソッドを使用してください。例: error(params)params には statusCodemessage プロパティが必要です。

$config

$config (Object)

実際のランタイム設定

サーバーサイドのキー

これらのキーはサーバーサイドでのみ使用できます。

req

req (http.Request )

Node.js サーバーからのリクエスト。Nuxt がミドルウェアとして使われる場合、リクエストオブジェクトは使用しているフレームワークによって異なる可能性があります。
nuxt generate では使用できません。

Res

res (http.Response )

Node.js サーバーからのレスポンス。Nuxt がミドルウェアとして使われる場合、レスポンスオブジェクトは使用しているフレームワークによって異なる可能性があります。
nuxt generate では使用できません。

beforeNuxtRender

beforeNuxtRender(fn) (Function)

クライアントサイドでレンダリングされた __NUXT__ 変数を更新するには、このメソッドを使用してください。fn(非同期にもできます)は { Components, nuxtState } で呼び出されます。を参照してください。

クライアントサイドのキー

これらのキーはクライアントサイドでのみ使用できます。

from

from (Vue Router Route )

遷移元の route。

nuxtState

nuxtState (Object)

Nuxt の状態。ハイドレーション前のクライアントサイドで Nuxt の状態を取得するために beforeNuxtRender を使うプラグインに便利です。universal モードでのみ使用できます。