In this blog, I am discussing the Nuxt.js asyncData hook. For server-side rendering in Nuxt.js need to use specific hooks. This allows your page to render with all of its required data presents.

Nuxt.js has two hooks for asynchronous data loading:

1. The fetch hook
2. The asyncData hook

Also, Nuxt.js supports traditional Vue patterns for loading data in your client-side app, such as fetching data in a component’s mounted() hook.

Some important features of asyncData hook in Nuxt.js:

1. asyncData works on both server-side & client-side rendering.
2. asyncData is called every time before loading a component.
3. You can use only on next pages, not in vue components.
4. anyncData is called from the server-side before the component is mounted. That’s why you don’t have access to ’this’ keyword inside asyncData().
5. This method receives the context object as the first argument and you can use it to access core nuxt properties such as route, store, params, app, etc.
6. The result from asyncData will be merged with data.

Here is the example of nuxt asyncData using @nuxt/axios library:

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.description }}</p>
  </div>
</template>

<script>
  export default {
    async asyncData({params, $axios }) {
      const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
      return { post }
    }
  }
</script>

asyncData hook returned the promise and resolved during the route transition. This means that no “loading placeholder” is visible during client-side transitions but you can use the loading bar can be used to indicate a loading state to the user.

asyncData() on both client-side & server-side:

To test how asyncData() works on both client-side & server-side, please write the bellow code on your Nuxt.js page.

<script>
export default{
    asyncData(context){
        console.log(context);
}
}
</script>

Server Side Test
Now reload the page on the browser and look inside your terminal(also can check on browser console panel Nuxt SSR Response) on which your Nuxt.js application running. You can see the context object like the below screenshot. That means its works on the server-side.

Client Side Test
You can also check client-side rendering when you come to this page from another Nuxt.js page (The link must be used NuxtLink for linking between pages). Now open your browser dev tools and check the console panel and you see the magic of asyncData().

How you can use Async data in components:

We already know that we can not use anyncData hook inside any component but we can use another way for component.
Make the API call in the asyncData method of the page component and pass the data as props to the sub components. Both Client & Server side rendering will work fine.

Referance: Nuxt.js Official Data Fetch Hook

Are you using Nuxt.js on your current project as front-end framework? then you have a great news, Nuxt.js Out of the box gives you its own loading progress bar component that’s shown between routes. You can do anything with the Nuxt.js loading progress bar, customize it, disable it, or can create your own loading progress bar.

Active & Customize Progress Bar:

You can activate the progress bar on your Nuxt.js application by adding the loading property of the nuxt.config.js inside the export default { //code here } with the corresponding properties.

To set a green progress bar with a height of 5px, add the following code inside your project nuxt.config.js file.

export default {
  loading: {
    color: 'green',
    height: '5px',
    throttle: 0
  }
}

You can customize many things, you can change color(color name/color hex code), height, duration, direction for rtl sites, keep animating progress bar when loading takes longer than duration.

export default {
  loading: {
    color: 'green',
    height: '5px',
    duration: 1000,
    rtl: true,
    continuous: true
  }
}

Disable the Progress Bar:

You can disable the progress bar globally or locally. If you want to disable the progress bar globally then add loading: false in your nuxt.config.js file:

export default {
  loading: false
}

Your can also disable the progress bar for specific page. Add loading: false in the specific page.

<template>
  <h1>Contact Us Page</h1>
</template>

<script>
  export default {
    loading: false
  }
</script>

Custom Loading Progress Bar:

You can also create your own custom loading progress bar. Inside the component directory create your custom component in LoadingBar.vue:

<template>
  <div v-if="loading" class="loading-page">
    <p>Loading...</p>
  </div>
</template>

<script>
  export default {
    data: () => ({
      loading: false
    }),
    methods: {
      start() {
        this.loading = true
      },
      finish() {
        this.loading = false
      }
    }
  }
</script>

<style scoped>
  .loading-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding-top: 200px;
    font-size: 30px;
    font-family: sans-serif;
  }
</style>

Then go to nuxt.config.js file and add your custom loading component to the loading property.

export default {
  loading: '~/components/LoadingBar.vue'
}

It’s very simple, right? Now you can see your own custom loading bar between routes changing.

Useful Links:

• Nuxt Loading Docs.
• Custom loading component example.