Accessing context in asyncData

We can access a bunch of useful stuff from the Nuxt context for fetching data. They stored inside the context object as the following keys:

app route store params query

req res redirect error env

isDev isHMR beforeNuxtRender(fn) from nuxtState

They are provided additionally and especially in Nuxt only, so we won't find them in Vue. We can access them either with context.<key> or { <key> }. So let's explore some of these keys and see how we can leverage them in the following sections.

For more information about the Nuxt context, please visit https://nuxtjs.org/api/context.

Accessing the req/res objects

We can access the req and res objects when the asyncData method is executed on the server side. They contain useful information of the HTTP request sent from the user. But we should always check with an if condition before accessing them:

// pages/index.vue
<p>{{ host }}</p>

export default {
  asyncData (...