The loading property

The loading property lets you disable the default loading progress bar or set a custom loading bar on a specific page. We covered it briefly in Chapter 2, Getting Started with Nuxt, so we know that we can configure the global default loading component in a Nuxt config file as follows:

// nuxt.config.js
export default {
  loading: {
    color: '000000'
  }
}

However, because we are on localhost and there is no need for much time to process the data, we usually won't be able to see this loading bar in action. For the sake of seeing it in action, let's demonstrate how this loading component works and looks by delaying the loading time of the data in the component with the following steps (but note that this demonstration should not be done in production):

1. Create an index.vue page in the /pages/ directory with the following code:

// pages/index.vue
<template>
  <div class="container">
    <p>Hello {{ name }}!</p>
    &lt...