Nuxt 3 já está disponível! Descobre mais sobre isso https://nuxt.com/v3
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'
}
Edit this page on GitHub Updated at Thu, Feb 9, 2023
Paiva Paiva Florian Reuschel Florian Reuschel Sébastien Chopin Sébastien Chopin Daniel Roe Daniel Roe Rishi Raj Jain Rishi Raj Jain Clément Ollivier Clément Ollivier Savas Vedova Savas Vedova Steven Soekha Steven Soekha Vinícius Alves Vinícius Alves Kareem Dabbeet Kareem Dabbeet Valentín Costa Valentín Costa Ryan Skinner Ryan Skinner Alex Hirzel Alex Hirzel Ajeet Chaulagain Ajeet Chaulagain René Eschke René Eschke Nico Devs Nico Devs Muhammad Muhammad Nazaré da Piedade Nazaré da Piedade Naoki Hamada Naoki Hamada Tom Tom Yann Aufray Yann Aufray Anthony Chu Anthony Chu Nuzhat Minhaz Nuzhat Minhaz Lucas Portet Lucas Portet Richard Schloss Richard Schloss bpy bpy Antony Konstantinidis Antony Konstantinidis Hibariya Hibariya Jose Seabra Jose Seabra Eze Eze Florian LEFEBVRE Florian LEFEBVRE Lucas Recoaro Lucas Recoaro Julien SEIXAS Julien SEIXAS Hugo Hugo Sylvain Marroufin Sylvain Marroufin Spencer Cooley Spencer Cooley Piotr Zatorski Piotr Zatorski Vladimir Semenov Vladimir Semenov Harry Allen Harry Allen kazuya kawaguchi kazuya kawaguchi Unai Mengual Unai Mengual Hyunseung Lee Hyunseung Lee Alexandre Chopin Alexandre Chopin pooya parsa pooya parsa Nick Medrano Nick Medrano Mosaab Emam Mosaab Emam Iljs Путлер Капут Iljs Путлер Капут Heitor Ramon Ribeiro Heitor Ramon Ribeiro Nero Nero Yoon Han Yoon Han Ikko Eltociear Ashimine Ikko Eltociear Ashimine FamCodings FamCodings Ayouli Ayouli F. Hinkelmann F. Hinkelmann felipesuri felipesuri Christophe Carvalho Vilas-Boas Christophe Carvalho Vilas-Boas Leoš Literák Leoš Literák Trizotti Trizotti