You are browsing Nuxt 2 docs. Go to Nuxt 3 docs, or learn more about Nuxt 2 Long Term Support.

Translated page Contents of this page might be outdated.
Read the original page Improve translation of this page

A propriedade loading

O Nuxt usa o seu próprio componente para mostrar uma barra de progresso entre as rotas. Você pode personalizar ela, desativar ela ou criar o seu próprio componente.

  • Tipo: Boolean ou Object ou String 
export default {
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()

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

Desativar a Barra de Progresso

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

Personalizado a Barra de Progresso

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

Lista de propriedades para personalizar a barra de progresso.

Chave Tipo Valor Padrão Descrição
color String 'black' A cor de css da barra de progresso
failedColor String 'red' A cor de css da barra de progresso quando um erro é acrescentado enquanto estiver renderizando a rota (se por exemplo o data ou fetch enviou um erro).
height String '2px' Altura da barra de progresso (usada dentro da propriedade style da barra de progresso)
throttle Number 200 Em milissegundos, espera pelo tempo especificado antes da exibição da barra de progresso. Útil para prevenir a barra de cintilar.
duration Number 5000 Em milissegundos, a duração máxima da barra de progresso, o Nuxt assume que a rota será renderizada antes de 5 segundos.
continuous Boolean false Mantém animando a barra de progresso quando o carregamento demorar mais do que a duration (duração).
css Boolean true Defina para false para remover os estilos padrão da barra de progresso (e adiciona o seu próprio estilo)
rtl Boolean false Define a direção da barra de progresso, da direita para esquerda.

Usando um Componente de Carregamento Personalizado

  • Tipo: String

O seu componente tem que expor alguns desses métodos:

Método Obrigatório Descrição
start() Obrigatório Chamado quando uma rota muda, isto é, onde você exibe o seu componente.
finish() Obrigatório Chamado quando uma rota é carregada (e os dados requisitados), isto é, onde você esconde o seu componente.
fail(error) Opcional Chamado quando uma rota não pode ser carregada (falhou em requisitar os dados por exemplo).
increase(num) Opcional Chamado durante o carregamento do componente de rota, num é um Inteiro maior do que 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'
}