$nuxt: O auxiliar de Nuxt

O $nuxt é um auxiliar desenhado para melhorar a experiência do usuário.

Para mais informações sobre o auxiliar do Nuxt consulte o capítulo contexto e auxiliares no livro de Conceitos

Verificador de conexão

isOffline
- Tipo: Boolean
- Descrição: true quando a conexão de internet do usuário estiver fora de linha
isOnline
- Tipo: Boolean
- Descrição: O oposto de isOffline

layouts/default.vue

<template>
  <div>
    <div v-if="$nuxt.isOffline">You are offline</div>
    <nuxt />
  </div>
</template>

Atualizando os dados da página

refresh()
- Quando você quiser apenas atualizar os dados fornecidos pelo asyncData ou pelo fetch

example.vue

<template>
  <div>
    <div>{{ content }}</div>
    <button @click="refresh">Refresh</button>
  </div>
</template>

<script>
  export default {
    asyncData() {
      return { content: 'Created at: ' + new Date() }
    },
    methods: {
      refresh() {
        this.$nuxt.refresh()
      }
    }
  }
</script>

Controlando a barra de carregamento

$loading
- Quando você quiser controlar programaticamente a barra de carregamento do Nuxt

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