Translated page Contents of this page might be outdated.
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
ouObject
ouString
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 Mon, Aug 19, 2024












































