useNetwork

リアクティブなネットワークステータス。Network Information API は、一般的な接続タイプ（例: 'wifi', 'cellular' など）に関するシステムの接続情報を提供します。これにより、ユーザーの接続状況に基づいて高解像度コンテンツまたは低解像度コンテンツを選択することができます。API全体は、NetworkInformation インターフェースの追加と、Navigator インターフェースへの単一のプロパティ: Navigator.connection の追加で構成されています。

使用法

import { useNetwork } from '@vueuse/core'

const { isOnline, offlineAt, downlink, downlinkMax, effectiveType, saveData, type } = useNetwork()

console.log(isOnline.value)

オブジェクトとして使用するには、reactive() でラップします

import { useNetwork } from '@vueuse/core'
// ---cut---
import { reactive } from 'vue'

const network = reactive(useNetwork())

console.log(network.isOnline)

コンポーネントでの使用法

<template>
  <UseNetwork v-slot="{ isOnline, type }">
    Is Online: {{ isOnline }}
    Type: {{ type }}
  </UseNetwork>
</template>