$nuxt: The Nuxt helper

$nuxt is a helper designed to improve user experience.

For more info on the Nuxt helper check out the context and helpers chapter in the Concepts book

Connection checker

  • isOffline
    • Type: Boolean
    • Description: true when the user's internet connection becomes offline
  • isOnline
    • Type: Boolean
    • Description: Opposite of isOffline
layouts/default.vue
<template>
  <div>
    <div v-if="$nuxt.isOffline">You are offline</div>
    <nuxt />
  </div>
</template>

Refreshing page data

  • refresh()
    • When you want to only refresh the data provided by asyncData or 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>

Controlling the loading bar

  • $loading
    • When you want to control Nuxt's loading bar programmatically 
export default {
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()
      setTimeout(() => this.$nuxt.$loading.finish(), 500)
    })
  }
}