$nuxt: Le helper Nuxt.js helper

$nuxt est un helper conçu pour améliorer l'expérience de l'utilisateur. Pour plus d'informations sur les helpers Nuxt.js, consultez le chapitre sur le contexte et les aides dans le livre des concepts

Contrôle de connexion

  • isOffline
    • Type: Boolean
    • Description: true lorsque la connexion internet de l'utilisateur est hors ligne
  • isOnline
    • Type: Boolean
    • Description: L'opposé de isOffline
layouts/default.vue
<template>
  <div>
    <div v-if="$nuxt.isOffline">Vous êtes hors ligne</div>
    <nuxt />
  </div>
</template>

Rafraîchissement des données de la page

  • refresh()
    • Lorsque vous souhaitez rafraîchir les données fournies par asyncData ou fetch
example.vue
<template>
  <div>
    <div>{{ content }}</div>
    <button @click="refresh">Rafraîchir</button>
  </div>
</template>

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

Contrôle de la barre de chargement

  • $loading
    • Lorsque vous voulez contrôler la barre de chargement de Nuxt 
export default {
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()
      setTimeout(() => this.$nuxt.$loading.finish(), 500)
    })
  }
}
Editer cette page sur GitHub Mise à jour le Mon, July 12, 2021
Internals Glossary Le Contexte
Internals Glossary Introduction aux modules Nuxt