A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://www.npmjs.com/package/vue-identify-network below:

vue-identify-network - npm

// 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