$nuxt: Nuxt ヘルパー

$nuxt はユーザーエクスペリエンスを向上するために設計されたヘルパーです。

Nuxt ヘルパーの詳細についてはコンテキストとヘルパーのドキュメントを参照してください。

Connection checker

isOffline
- 型: Boolean
- 説明: ユーザーのインターネット接続環境がオフラインになった時に true
isOnline
- 型: Boolean
- 説明: Opposite of isOffline の反対

layouts/default.vue

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

ページデータのリフレッシュ

refresh()
- asyncData または 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>

ローディングバーの制御

$loading
- Nuxt のローディングバーをプログラムで制御したいとき

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