You are browsing Nuxt 2 docs. Go to Nuxt 3 docs, or learn more about Nuxt 2 Long Term Support.

Page traduite Le contenu de cette page peut être déprécié.

$nuxt: Le helper Nuxt helper

$nuxt est un helper conçu pour améliorer l'expérience de l'utilisateur. Pour plus d'informations sur les helpers Nuxt, 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)
    })
  }
}