Concepts: Helpers

 Besides the shortcuts in the context, there are also other tiny helpers present in your Nuxt.js application.

$nuxt: The Nuxt.js helper

$nuxt is a helper designed to improve the user experience and to be an escape hatch in some situations. It is accessible via this.$nuxt in Vue components and via window.$nuxt otherwise on the client side.

Connection checker

The $nuxt helper provides a quick way to find out whether the internet connection of a user is present or not: It exposes the boolean values isOffline and isOnline. We can use these to show a message as soon as the user is offline (for example).

layouts/default.vue

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

Accessing the root instance

Besides providing DX/UX features, the $nuxt helper also provides a shortcut to the root instance of your application from every other component. But that's not everything — you can also access the $nuxt helper through window.$nuxt which can be used as an escape hatch to gain access to module methods like $axios from outside your Vue components. This should be used wisely and only as last resort.

Refreshing page data

When you want to refresh the current page for the user, you don't want to fully reload the page because you might hit the server again and at least re-initialize the whole Nuxt.js application. Instead, you often only want to refresh the data, provided by asyncData or fetch.

You can do so, by using this.$nuxt.refresh()!

<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

With $nuxt, you can also control Nuxt's loading bar programmatically via this.$nuxt.$loading.

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

Read more in the corresponding loading feature chapter

onNuxtReady helper

If you want to run some scripts after your Nuxt.js application has been loaded and is ready, you can use the window.onNuxtReady function. This can be useful when you want to execute a function on the client-side without increasing the time to interactive of your site.

window.onNuxtReady(() => {
  console.log('Nuxt.js is ready and mounted')
})

Process helpers

Nuxt.js injects three boolean values into the global process object which will help you to determine whether your app was rendered on the server or fully on the client, as well as checking for static site generation. These helpers are available across your application and are commonly used in asyncData userland code.

pages/about.vue

<template>
  <h1>I am rendered on the {{ renderedOn }} side</h1>
</template>

<script>
  export default {
    asyncData() {
      return { renderedOn: process.client ? 'client' : 'server' }
    }
  }
</script>

In the example, renderedOn will evaluate to 'server' when using server-side rendering and a user accesses the page directly. When the user would navigate to the page from another part of the application, e.g. by click on a <NuxtLink>, it will evaluate to client.