# NetworkInformation
# State
The useNetworkInformation
function exposes the following reactive state:
import { useNetworkInformation } from "vue-composable";
const {
downlink,
downlinkMax,
effectiveType,
rtt,
saveData,
supported,
type
} = useNetworkInformation();
State | Type | Description |
---|---|---|
downlink | Number | Returns the effective bandwidth estimate in megabits per second, rounded to the nearest multiple of 25 kilobits per seconds. |
downlinkMax | Number | Returns the maximum downlink speed, in megabits per second (Mbps), for the underlying connection technology. |
effectiveType | String | Returns the effective type of the connection meaning one of slow-2g , 2g , 3g , or 4g . This value is determined using a combination of recently observed round-trip time and downlink values. |
rtt | Number | Returns the estimated effective round-trip time of the current connection, rounded to the nearest multiple of 25 milliseconds. |
saveData | Boolean | Returns true if the user has set a reduced data usage option on the user agent. |
supported | Boolean | If the current browser supports Network Information API |
type | String | Returns the type of connection a device is using to communicate with the network. It will be one of the following values: bluetooth , cellular , ethernet , none , wifi , wimax , other , unknown |
# Methods
The useNetworkInformation
function exposes the following methods:
import { useNetworkInformation } from "vue-composable";
const { remove } = useNetworkInformation();
Signature | Description |
---|---|
remove | Manually removes the event listener |
# Example
Network information
supported: false
downlink: 0
downlinkMax: 0
effectiveType: none
round-trip time: 0
saveData: false
type: none
# Code
<template>
<div>
<h3>Network information</h3>
<p>
supported: <b>{{ supported }}</b>
</p>
<p>
downlink: <b>{{ downlink }}</b>
</p>
<p>
downlinkMax: <b>{{ downlinkMax }}</b>
</p>
<p>
effectiveType: <b>{{ effectiveType }}</b>
</p>
<p>
round-trip time: <b>{{ rtt }}</b>
</p>
<p>
saveData: <b>{{ saveData }}</b>
</p>
<p>
type: <b>{{ type }}</b>
</p>
</div>
</template>
<script>
import { useNetworkInformation } from "vue-composable";
export default {
name: "NetworkInformationExample",
setup() {
return useNetworkInformation();
}
};
</script>