title | description | category |
---|---|---|
The context |
The context provides additional objects/params from Nuxt to Vue components and is available in special nuxt lifecycle areas. |
internals-glossary |
The context
provides additional objects/params from Nuxt to Vue components and is available in special nuxt lifecycle areas like asyncData
, fetch
, plugins
, middleware
and nuxtServerInit
.
Note: "The Context" we refer to here is not to be confused with the
context
object available inVuex Actions
. The two are unrelated.
function (context) {
// Universal keys
const {
app,
store,
route,
params,
query,
env,
isDev,
isHMR,
redirect,
error,
$config
} = context
// Server-side
if (process.server) {
const { req, res, beforeNuxtRender } = context
}
// Client-side
if (process.client) {
const { from, nuxtState } = context
}
}
These keys are available both on client-side and server-side.
app
(NuxtAppOptions)
The root Vue instance options that includes all your plugins. For example, when using i18n
, you can get access to $i18n
through context.app.i18n
.
store
(Vuex Store)
Vuex Store instance. Available only if the vuex store is set.
route
(Vue Router Route)
Vue Router route instance.
params
(Object)
Alias of route.params
.
query
(Object)
Alias of route.query
.
env
(Object)
Environment variables set in nuxt.config.js
, see env API.
isDev
(Boolean)
Boolean to let you know if you're in dev mode, can be useful for caching some data in production.
isHMR
(Boolean)
Boolean to let you know if the method/middleware is called from webpack hot module replacement (true only on client-side in dev mode).
redirect
(Function)
Use this method to redirect the user to another route, the status code is used on the server-side, defaults to 302
. redirect([status,] path [, query])
.
Examples:
redirect(302, '/login')
redirect({ name: 'slug', params: { slug: mySlug } })
redirect('https://vuejs.org')
See the Vue Router docs more info on the Location property.
::alert{type="info"}
It's not possible to use redirect
or error
in client-side Nuxt plugin due to hydration errors (client content would be different from what it'd expect from the server).
A valid workaround would be using window.onNuxtReady(() => { window.$nuxt.$router.push('/your-route') })
::
error
(Function)
Use this method to show the error page: error(params)
. The params
should have the properties statusCode
and message
.
$config
(Object)
The actual runtime config.
These keys are available only on the server-side.
req
(http.Request)
Request from the Node.js server. If Nuxt is used as a middleware, the request object might be different depending on the framework you're using.
Not available via nuxt generate
.
res
(http.Response)
Response from the Node.js server. If Nuxt is used as a middleware, the res object might be different depending on the framework you're using.
Not available via nuxt generate
.
beforeNuxtRender(fn)
(Function)
Use this method to update __NUXT__
variable rendered on client-side, the fn
(can be asynchronous) is called with { Components, nuxtState }
, see example.
beforeSerialize(fn)
(Function), available from Nuxt 2.16+
Use this method to update __NUXT__
variable rendered on client-side, the fn
(must be synchronous) is called with nuxtState
as argument. This method is called inside the rendered
method of Vue SSR, allowing you to use it in components.
Note: this usage is advanced and mostly used for Nuxt modules.
export default {
// Using asyncData
asyncData({ beforeSerialize }) {
if (process.server) {
beforeSerialize(nuxtState => {
nuxtState.hello = 'world'
})
}
},
// Using fetch
fetch() {
if (process.server) {
this.$root.context.beforeSerialize(nuxtState => {
nuxtState.hello = 'world'
})
}
}
}
These keys are available only on client-side.
from
(Vue Router Route)
The route navigated from.
nuxtState
(Object)
Nuxt state, useful for plugins which uses beforeNuxtRender
to get the nuxt state on client-side before hydration. Available only in universal
mode.