$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

  1. <template>
  2. <div>
  3. <div v-if="$nuxt.isOffline">You are offline</div>
  4. <nuxt />
  5. </div>
  6. </template>

Refreshing page data

  • refresh()
    • When you want to only refresh the data provided by asyncData or fetch

example.vue

  1. <template>
  2. <div>
  3. <div>{{ content }}</div>
  4. <button @click="refresh">Refresh</button>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. asyncData() {
  10. return { content: 'Created at: ' + new Date() }
  11. },
  12. methods: {
  13. refresh() {
  14. this.$nuxt.refresh()
  15. }
  16. }
  17. }
  18. </script>

Controlling the loading bar

  • $loading
    • When you want to control Nuxt’s loading bar programmatically
  1. export default {
  2. mounted() {
  3. this.$nextTick(() => {
  4. this.$nuxt.$loading.start()
  5. setTimeout(() => this.$nuxt.$loading.finish(), 500)
  6. })
  7. }
  8. }