Skip to content
On this page

useNetwork

Category
Last Changed
3 months ago

Reactive Network status. The Network Information API provides information about the system's connection in terms of general connection type (e.g., 'wifi', 'cellular', etc.). This can be used to select high definition content or low definition content based on the user's connection. The entire API consists of the addition of the NetworkInformation interface and a single property to the Navigator interface: Navigator.connection.

Demo

isSupported: false
isOnline: true
saveData: false
type: 'unknown'

Usage

import { useNetwork } from '@vueuse/core'

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

console.log(isOnline.value)
import { useNetwork } from '@vueuse/core'

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

console.log(isOnline.value)

To use as an object, wrap it with reactive()

import { reactive } from 'vue'

const network = reactive(useNetwork())

console.log(network.isOnline)
import { reactive } from 'vue'

const network = reactive(useNetwork())

console.log(network.isOnline)

Component

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.
<UseNetwork v-slot="{ isOnline, type }">
  Is Online: {{ isOnline }}
  Type: {{ type }}
<UseNetwork>
<UseNetwork v-slot="{ isOnline, type }">
  Is Online: {{ isOnline }}
  Type: {{ type }}
<UseNetwork>

Type Declarations

Show Type Declarations
export declare type NetworkType =
  | "bluetooth"
  | "cellular"
  | "ethernet"
  | "none"
  | "wifi"
  | "wimax"
  | "other"
  | "unknown"
export declare type NetworkEffectiveType =
  | "slow-2g"
  | "2g"
  | "3g"
  | "4g"
  | undefined
export interface NetworkState {
  isSupported: boolean
  /**
   * If the user is currently connected.
   */
  isOnline: Ref<boolean>
  /**
   * The time since the user was last connected.
   */
  offlineAt: Ref<number | undefined>
  /**
   * The download speed in Mbps.
   */
  downlink: Ref<number | undefined>
  /**
   * The max reachable download speed in Mbps.
   */
  downlinkMax: Ref<number | undefined>
  /**
   * The detected effective speed type.
   */
  effectiveType: Ref<NetworkEffectiveType | undefined>
  /**
   * The estimated effective round-trip time of the current connection.
   */
  rtt: Ref<number | undefined>
  /**
   * If the user activated data saver mode.
   */
  saveData: Ref<boolean | undefined>
  /**
   * The detected connection/network type.
   */
  type: Ref<NetworkType>
}
/**
 * Reactive Network status.
 *
 * @see https://vueuse.org/useNetwork
 * @param options
 */
export declare function useNetwork(
  options?: ConfigurableWindow
): Readonly<NetworkState>
export declare type NetworkType =
  | "bluetooth"
  | "cellular"
  | "ethernet"
  | "none"
  | "wifi"
  | "wimax"
  | "other"
  | "unknown"
export declare type NetworkEffectiveType =
  | "slow-2g"
  | "2g"
  | "3g"
  | "4g"
  | undefined
export interface NetworkState {
  isSupported: boolean
  /**
   * If the user is currently connected.
   */
  isOnline: Ref<boolean>
  /**
   * The time since the user was last connected.
   */
  offlineAt: Ref<number | undefined>
  /**
   * The download speed in Mbps.
   */
  downlink: Ref<number | undefined>
  /**
   * The max reachable download speed in Mbps.
   */
  downlinkMax: Ref<number | undefined>
  /**
   * The detected effective speed type.
   */
  effectiveType: Ref<NetworkEffectiveType | undefined>
  /**
   * The estimated effective round-trip time of the current connection.
   */
  rtt: Ref<number | undefined>
  /**
   * If the user activated data saver mode.
   */
  saveData: Ref<boolean | undefined>
  /**
   * The detected connection/network type.
   */
  type: Ref<NetworkType>
}
/**
 * Reactive Network status.
 *
 * @see https://vueuse.org/useNetwork
 * @param options
 */
export declare function useNetwork(
  options?: ConfigurableWindow
): Readonly<NetworkState>

Source

SourceDemoDocs

Contributors

Anthony Fu
Lexpeartha
webfansplz
wheat
Alex Kozack
Antério Vieira

Changelog

v5.2.0 on 7/25/2021
8ce66 - feat: add rtt properties (#623)
v5.0.0-beta.2 on 5/25/2021
5bede - feat: introduce components & directives (#486)
useNetwork has loaded