// component.vue <script lang="ts"> import { defineComponent } from 'vue'; import { VueIdentifyNetwork } from 'vue-identify-network'; export default defineComponent({ components: { VueIdentifyNetwork, }, }); </script>
export default { // ... plugins: [ // ... { src: '~/plugins/vue-identify-network', mode: 'client' }, // ... ], // ... };
<template> <vue-identify-network> <span slot="unknown"> REEE! Unable to identify your network type. </span> <span slot="slow"> <img src="cat.gif" alt="you got slow internet" /> </span> <span slot="fast"> <video width="400" controls> <source src="mov_bbb.mp4" type="video/mp4" /> <source src="mov_bbb.ogg" type="video/ogg" /> Your browser does not support HTML5 video. </video> </span> </vue-identify-network> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import type { Ref } from 'vue'; import { VueIdentifyNetwork } from 'vue-identify-network'; export default defineComponent({ components: { VueIdentifyNetwork, }, setup() { const online: Ref<boolean> = ref(false); const onNetworkChange = (status: boolean) => { online.value = status; }; return { online, onNetworkChange }; }, }); </script>
vue-identify-network © Vinayak, Released under the MIT License.
Authored and maintained by Vinayak Kulkarni with help from contributors (list).
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4