The loading Property

  • Type: Boolean or Object or String

Out of the box, Nuxt.js gives you its own loading progress bar component that's shown between routes. You can customize it, disable it or create your own component.

export default {
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()

      setTimeout(() => this.$nuxt.$loading.finish(), 500)
    })
  }
}

Disable the Progress Bar

  • Type: Boolean
nuxt.config.js
export default {
  loading: false
}

Customizing the Progress Bar

  • Type: Object
export default {
  loading: {
    color: 'blue',
    height: '5px'
  }
}

List of properties to customize the progress bar.

KeyTypeDefaultDescription
colorString'black'CSS color of the progress bar
failedColorString'red'CSS color of the progress bar when an error appended while rendering the route (if data or fetch sent back an error for example).
heightString'2px'Height of the progress bar (used in the style property of the progress bar)
throttleNumber200In ms, wait for the specified time before displaying the progress bar. Useful for preventing the bar from flashing.
durationNumber5000In ms, the maximum duration of the progress bar, Nuxt.js assumes that the route will be rendered before 5 seconds.
continuousBooleanfalseKeep animating progress bar when loading takes longer than duration.
cssBooleantrueSet to false to remove default progress bar styles (and add your own).
rtlBooleanfalseSet the direction of the progress bar from right to left.

Using a Custom Loading Component

  • Type: String

Your component has to expose some of these methods:

MethodRequiredDescription
start()RequiredCalled when a route changes, this is where you display your component.
finish()RequiredCalled when a route is loaded (and data fetched), this is where you hide your component.
fail(error)OptionalCalled when a route couldn't be loaded (failed to fetch data for example).
increase(num)OptionalCalled during loading the route component, num is an Integer < 100.
components/loading.vue
<template lang="html">
  <div class="loading-page" v-if="loading">
    <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>
nuxt.config.js
export default {
  loading: '~/components/loading.vue'
}

Contributors

Обнаружили ошибку или хотите внести свой вклад в документацию? Отредактировать эту страницу на GitHub!