Carregamento

Fora da caixa, o Nuxt dá para você o seu próprio componente de barra de progresso de carregamento que é exibido entre as rotas. Você pode personalizar ele, desativar ele ou até criar seu próprio componente de carregamento.

Personalizando a Barra de Progresso

Entre outras propriedades, a color, o tamanho, a duração e a direção da barra de progresso podem ser personalizados para enquadrarem-se as necessidades da sua aplicação. Isto é feito pela atualização da propriedade loading do nuxt.config.js com as propriedades correspondentes.

Por exemplo, para definir uma barra de progresso azul com a altura de 5px, atualizamos o nuxt.config.js para o seguinte:

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

Lista de propriedades para personalizar a barra de progresso.

Desativar a Barra de Progresso

Se você não quiser exibir a barra de progresso entre as rotas adicione loading: false dentro do seu ficheiro nuxt.config.js :

export default {
  loading: false
}

A propriedade loading dá para você a opção de desativar a barra de progresso padrão em uma página específica.

<template>
  <h1>My page</h1>
</template>

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

Começar Programaticamente a Barra de Carregamento

A barra de carregamento também pode ser programaticamente iniciada dentro dos seus componentes ao chamar this.$nuxt.$loading.start() para iniciar a barra de carregamento e this.$nuxt.$loading.finish() para terminar ele.

Durante o processo de montagem dos componentes da sua página, a propriedade $loading pode não estar imediatamente disponível para acessar. Para dar a volta a isso, se você quiser iniciar o carregador dentro do método mounted , certifique-se de envolver a sua chamada para o método $loading dentro de this.$nextTick como é mostrado abaixo.

export default {
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()
      setTimeout(() => this.$nuxt.$loading.finish(), 500)
    })
  }
}

Os Interiores da Barra de Progresso

Infelizmente, não é possível para o componente de carregamento saber de antemão quanto tempo uma nova página levará para carregar. Portanto, não é possível de maneira precisa animar a barra de progresso até 100% do tempo de carregamento.

O componente de carregamento do Nuxt resolve parcialmente isso ao deixar você definir a duration, isso deve ser definido para uma estimativa de quanto tempo o processo de carregamento levará. A menos que você use um componente de carregamento personalizado, a barra de progresso irá sempre mover de 0% para 100% em tempo de duration  (independentemente da progressão atual). Sempre que o carregamento levar mais tempo do que o tempo em duration , a barra de progresso continuará em 100% até o carregamento terminar.

Você pode mudar o comportamento padrão ao configurar continuous para true, então depois de alcançar o 100% a barra de progresso começará reduzindo novamente de volta para 0% em tempo de duration . Sempre que o carregamento não estiver terminado depois de alcançar 0% ele começará crescendo novamente de 0% até 100%, isto é repetido até o carregamento terminar.

export default {
  loading: {
    continuous: true
  }
}

Exemplo de uma barra de progresso contínua:

Usando um Componente de Carregamento Personalizado

Você pode também criar seu próprio componente que o Nuxt chamará no lugar do componente padrão para a barra de progresso. Para fazer isso no entanto, você precisa dar um caminho para o seu componente dentro da opção loading . Depois, o seu componente será chamado diretamente pelo Nuxt.

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

Você pode criar o seu componente personalizado dentro de components/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>

Depois, você atualiza seu nuxt.config.js para dizer ao Nuxt para usar o seu componente:

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

A Propriedade loadingIndicator

Não há conteúdo vindo do lado do servidor no primeiro carregamento da página, quando o Nuxt estiver executando no modo SPA. Então, ao invés de mostrar uma página em branco enquanto a página carrega, o Nuxt dá para você um rodopiador (spinner) o qual você pode personalizar para adicionar suas próprias cores, fundo e até mudar o indicador.

export default {
  loadingIndicator: {
    name: 'circle',
    color: '#3B8070',
    background: 'white'
  }
}

Indicadores Embutidos

Esses indicadores são importados do incrível projeto SpinKit  . Você pode consultar a sua página de demonstração para pré-visualizar os rodopiadores (spinners). No propósito de usar um desses rodopiadores tudo o que você tem de fazer é adicionar seu nome a propriedade name. Não precisa importar ou instalar nada. Aqui está uma lista dos indicadores embutidos para você usar.

• circle
• cube-grid
• fading-circle
• folding-cube
• chasing-dots
• nuxt
• pulse
• rectangle-bounce
• rotating-plane
• three-bounce
• wandering-cubes

Os indicadores embutidos suportam as opções color e background .

Indicadores Personalizados

Se você precisar seu próprio indicador especial, um valor do tipo String ou chave Name pode ser um caminho para o modelo (template) HTML do código-fonte do indicador! Todas as opções são passadas para o modelo também.

Código-fonte do componente Loading embutido do Nuxt!