Le Contexte

Le context fournit des objets/paramètres en plus aux composants Vue et est disponible dans des lifecycles Nuxt spéciaux comme par exemple asyncData , fetch , plugins , middleware et nuxtServerInit .

Note: Le "context" auquel on fait référence ici ne doit pas être confondu avec l'objet context disponible dans les actions Vuex . Les deux n'ont rien à voir.

function (context) {
  // Paramètres universels
  const {
    app,
    store,
    route,
    params,
    query,
    env,
    isDev,
    isHMR,
    redirect,
    error,
    $config
  } = context
  // Côté serveur
  if (process.server) {
    const { req, res, beforeNuxtRender } = context
  }
  // Côté client
  if (process.client) {
    const { from, nuxtState } = context
  }
}

Paramètres universels

Ce sont les paramètres qui sont disponibles côté client et côté serveur.

app

app (NuxtAppOptions)

L'instance principale de Vue avec les options qui incluent tous vos plugins. Par exemple, lorsque l'on utilise i18n, on peut avoir accès à $i18n grâce à context.app.i18n.

store

store (Store Vuex )

L'instance du Store Vuex. Disponible uniquement si le store vuex a été défini.

route

route (Vue Router Route )

L'instance du Routeur de Vue.

params

params (Objet)

Un alias de route.params.

query

query (Objet)

Un alias de route.query.

env

env (Objet)

Variables d'environnement définies dans le fichier nuxt.config.js, se référer à l'API env .

isDev

isDev (Booléen)

Un booléen qui permet de savoir si l'on est en mode développement, cela peut être utile pour mettre en cache de la data en production.

isHMR

isHMR (Booléen)

Un booléen qui permet de savoir si la méthode/middleware est appellé depuis le module de remplacement à chaud de webpack (vrai seulement du côté client et en mode développement).

redirect

redirect (Fonction)

Utilisez cette méthode pour rediriger l'utilisateur vers une autre route, le status code est utilisé du côté serveur, prend la valeur 302 par défaut. redirect([status,] path [, query]).

Exemples:

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

Voir le Vue Router docs more info on the Location property.

error

error (Fonction)

Utilisez cette méthode pour afficher la page d'erreur: error(paramètres). Les paramètres doivent avoir les propriétés statusCode et message.

$config

$config (Objet)

La configuration de l'exécution même.

Paramètres côté serveur

Ces paramètres ne sont disponibles que du côté serveur.

req

req (http.Request )

Requête provenant du serveur Node.js. Si Nuxt est utilisé en tant que middleware, l'objet de la requête risque d'être différent en fonction du framework que l'on utilise.
Non disponible lors d'un nuxt generate.

Res

res (http.Response )

Réponse du serveur Node.js. Si Nuxt est utilisé en tant que middleware, l'objet de la réponse peut être différent en fonction du framework que l'on utilise.
Non disponible lors d'un nuxt generate.

beforeNuxtRender

beforeNuxtRender(fn) (Fonction)

Utilisez cette méthode pour mettre à jour la variable __NUXT__ render du côté client, fn (peut être asynchrone) est appelé avec { Components, nuxtState }, voir cet exemple .

Paramètres côté client

Ces paramètres ne sont disponibles que du côté client.

from

from (Vue Router Route )

La route d'où l'on vient.

nuxtState

nuxtState (Objet)

Le state de Nuxt, utile pour les plugins qui utilisent beforeNuxtRender pour avoir le state de Nuxt avant l'hydratation. Disponible uniquement dans le mode universal.