Nuxt Component Options

Component options

In order to hook into the functionality that the framework offers, Nuxt allows us to add some specific properties and functions to our page components. Let’s take a look at them.

The asyncData component

Before a component is initialized, Nuxt will look to see if it has an asyncData() method. If it does, this method is called, giving us the opportunity to fetch any data we might need to render the component.

On the initial request, it will be run on the server, but once the app has loaded, subsequent calls will be run on the client as the user navigates around the running SPA.

The method receives the Nuxt context object as its first parameter. This object gives us access to the following:

• app: The main Vue instance for our application, including any attached plugins

• route: The current route object

• store: The Vuex store, if we’re using one

• params: A shortcut to the route.params object

• query: A shortcut to the route.query object

• req: The request object (if running on the server)

• res: The response object (if running on the server)

• redirect: A function for redirecting the current route

• error: A function for displaying an error page

The value we return from the method should be an object that Nuxt can merge with the component’s data object. It’s important to note that we don’t have access to the component itself from within the asyncData() method because it hasn’t been initialized yet.