Carregamento

De imediato, a Nuxt dá-nos o seu componente de barra de progresso de carregamento que é mostrado entre as rotas. Podemos personalizá-lo, desativá-lo ou até criar o nosso próprio componente de carregamento.

Personalizar a Barra de Progresso

Entre outras propriedades, a cor, o tamanho, a duração e a direção da barra de progresso podem ser personalizadas de acordo com as necessidades da nossa aplicação. Isto é feito ao atualizar a propriedade loading do nuxt.config.js com as propriedades correspondentes.

Por exemplo, para definir uma barra de progresso azul com uma 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 não quisermos exibir a barra de progresso entre as rotas, adicionamos loading: false no nosso ficheiro nuxt.config.js:

export default {
  loading: false
}

A propriedade loading dá-nos a opção de desativar a barra de progresso de carregamento predefinida numa página específica:

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

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

Iniciar Programaticamente a Barra de Carregamento

A barra de carregamento também pode ser iniciada programaticamente nos nossos componentes, ao chamar this.$nuxt.$loading.start() para iniciar a barra de carregamento e this.$nuxt.$loading.finish() para terminá-la.

A propriedade $loading pode não estar imediatamente disponível para ser usada durante o processo de montagem do nosso componente de página. Para contornar isto, se quisermos iniciar o carregador no método mounted, precisamos envolver as nossas chamadas do 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)
    })
  }
}

O Interior da Barra de Progresso

Infelizmente, não é possível que o componente de carregamento saiba antecipadamente quanto tempo demorará a carregar uma nova página. Por isto, não é possível animar com exatidão a barra de progresso para 100% do tempo de carregamento.

O componente de carregamento da Nuxt resolve isto parcialmente, permitindo que definamos a duration, que deve ser definida como uma estimativa de quanto tempo o processo de carregamento levará. A menos que usemos um componente de carregamento personalizado, a barra de progresso sempre se moverá de 0% a 100% no tempo de duration (independentemente da progressão real). Quando o carregamento demorar mais do que o tempo de duration, a barra de progresso permanecerá em 100% até o carregamento terminar.

Podemos alterar o comportamento predefinido ao definir continuous como true. Depois de atingir 100%, a barra de progresso começará a diminuir para 0% novamente no tempo de duration. Se o carregamento ainda não estiver concluído depois de atingir 0%, aumentará novamente de 0% para 100%. O processo repete-se até ao fim do carregamento:

export default {
  loading: {
    continuous: true
  }
}

Exemplo duma barra de progresso contínua:

Usar um Componente de Carregamento Personalizado

Também podemos criar o nosso próprio componente que a Nuxt chamará no lugar do componente predefinido da barra de progresso de carregamento. Para isto, precisamos dar um caminho ao nosso componente na opção loading. Então, o nosso componente será chamado diretamente pela Nuxt.

O nosso componente tem de expor alguns desses métodos:

Podemos criar o nosso componente personalizado em 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, atualizamos o nosso nuxt.config.js para dizer a Nuxt para usar o nosso componente:

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

A Propriedade do Indicador de Carregamento

Ao executar a Nuxt no modo de aplicação de página única, não existe conteúdo do lado do servidor no primeiro carregamento da página. Assim, em vez de mostrar uma página em branco enquanto a página carrega, a Nuxt dá-nos um componente giratório que podemos personalizar para adicionar as nossas próprias cores ou fundo e até mudar o indicador:

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

Indicadores Embutidos

Estes indicadores são importados do incrível projeto SpinKit . Podemos consultar a sua página de demonstração para pré-visualizar os componentes giratórios. Para utilizar um destes componentes giratórios, só temos de adicionar o seu nome à propriedade name. Não é necessário importar ou instalar nada. Eis uma lista de indicadores embutidos que podemos utilizar:

• '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 precisarmos do nosso próprio indicador especial, um valor de sequência de caracteres (String) ou uma chave de nome (Name) também pode ser um caminho para um modelo de marcação de hipertexto do código-fonte do indicador! Todas as opções também são passadas para o modelo de marcação de hipertexto.

O código-fonte do componente de carregamento embutido da Nuxt também está disponível se precisarmos duma base!