{"id":18283146,"url":"https://github.com/vinayakkulkarni/v-offline","last_synced_at":"2025-05-15T03:05:30.734Z","repository":{"id":25232702,"uuid":"103508922","full_name":"vinayakkulkarni/v-offline","owner":"vinayakkulkarni","description":":electric_plug: Simple VueJS component to detect offline \u0026 online changes.","archived":false,"fork":false,"pushed_at":"2025-05-08T19:42:28.000Z","size":8999,"stargazers_count":375,"open_issues_count":10,"forks_count":30,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-09T07:03:58.297Z","etag":null,"topics":["awesome-vue","detection-network","network","offline","online","vue","vue-components","vue2","vue2-component","vuejs"],"latest_commit_sha":null,"homepage":"https://vinayakkulkarni.github.io/offline/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vinayakkulkarni.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-09-14T08:45:35.000Z","updated_at":"2025-02-01T01:04:03.000Z","dependencies_parsed_at":"2024-06-25T18:16:28.480Z","dependency_job_id":"e857352c-6f98-44b2-b86d-fb5646773e09","html_url":"https://github.com/vinayakkulkarni/v-offline","commit_stats":{"total_commits":1283,"total_committers":8,"mean_commits":160.375,"dds":"0.22369446609508958","last_synced_commit":"c3c230bea08a0741337f3fdbc1e29506deced5ea"},"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinayakkulkarni%2Fv-offline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinayakkulkarni%2Fv-offline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinayakkulkarni%2Fv-offline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinayakkulkarni%2Fv-offline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vinayakkulkarni","download_url":"https://codeload.github.com/vinayakkulkarni/v-offline/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254264765,"owners_count":22041793,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["awesome-vue","detection-network","network","offline","online","vue","vue-components","vue2","vue2-component","vuejs"],"created_at":"2024-11-05T13:07:46.578Z","updated_at":"2025-05-15T03:05:30.713Z","avatar_url":"https://github.com/vinayakkulkarni.png","language":"Vue","funding_links":[],"categories":["UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["杂","UI Components","Miscellaneous"],"readme":"# V-Offline ⚡️\n\n[![CI](https://img.shields.io/github/actions/workflow/status/vinayakkulkarni/v-offline/ci.yml?label=CI\u0026branch=main\u0026logo=github-actions)](https://github.com/vinayakkulkarni/v-offline/actions/workflows/ci.yml)\n[![CodeQL](https://img.shields.io/github/actions/workflow/status/vinayakkulkarni/v-offline/codeql.yml?label=CodeQL\u0026branch=main\u0026logo=github-actions)](https://github.com/vinayakkulkarni/v-offline/actions/workflows/codeql.yml)\n[![Ship.js Trigger](https://img.shields.io/github/actions/workflow/status/vinayakkulkarni/v-offline/shipjs-trigger.yml?label=⛴%20Ship.js%20trigger)](https://github.com/vinayakkulkarni/v-offline/actions/workflows/shipjs-trigger.yml)\n[![npm](https://img.shields.io/npm/dm/v-offline?logo=npm)](http://npm-stat.com/charts.html?package=v-offline)\n[![npm](https://img.shields.io/npm/v/v-offline/latest?logo=npm)](https://www.npmjs.com/package/v-offline)\n[![npm bundle size (version)](https://img.shields.io/bundlephobia/min/v-offline/latest?label=@latest%20size\u0026logo=vue.js)](https://bundlephobia.com/package/v-offline@latest)\n[![npm](https://img.shields.io/npm/v/v-offline/legacy?logo=npm)](https://www.npmjs.com/package/v-offline)\n[![npm bundle size (version)](https://img.shields.io/bundlephobia/min/v-offline/legacy?label=@legacy%20size\u0026logo=vue.js)](https://bundlephobia.com/package/v-offline@legacy)\n[![npm type definitions](https://img.shields.io/npm/types/v-offline)](https://github.com/vinayakkulkarni/v-offline/blob/master/package.json)\n[![DeepScan grade](https://deepscan.io/api/teams/9055/projects/16121/branches/339368/badge/grade.svg)](https://deepscan.io/dashboard#view=project\u0026tid=9055\u0026pid=16121\u0026bid=339368)\n[![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/vinayakkulkarni/v-offline)](https://snyk.io/test/github/vinayakkulkarni/v-offline)\n[![GitHub contributors](https://img.shields.io/github/contributors/vinayakkulkarni/v-offline?logo=github)](https://github.com/vinayakkulkarni/v-offline/graphs/contributors)\n[![FOSSA](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fvinayakkulkarni%2Fv-offline.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fvinayakkulkarni%2Fv-offline?ref=badge_shield)\n\n[![eslint](https://img.shields.io/npm/dependency-version/v-offline/dev/eslint?logo=eslint)](https://eslint.org/)\n[![prettier](https://img.shields.io/npm/dependency-version/v-offline/dev/prettier?logo=prettier)](https://prettier.io/)\n[![vite](https://img.shields.io/npm/dependency-version/v-offline/dev/vite?logo=vite)](https://vitejs.dev/)\n[![vue](https://img.shields.io/npm/dependency-version/v-offline/dev/vue?logo=vue.js)](https://vuejs.org/)\n[![typescript](https://img.shields.io/npm/dependency-version/v-offline/dev/typescript?logo=TypeScript)](https://www.typescriptlang.org/)\n\n⚠️ Docs are for Vue 3, for Vue 2 docs, [click here](https://github.com/vinayakkulkarni/v-offline#v-offline-%EF%B8%8F)\n\n## Features\n\n- Detect offline \u0026 online events for your vue app.\n- Built from scratch usign Vue 2 \u0026 Composition API with TypeScript\n- For Vue \u003e3.x version – `npm i v-offline@latest`\n- For Vue \u003e=2.7 version – `npm i v-offline@legacy`\n- For Vue \u003c2.7 version – `npm i v-offline@2.3.0`\n\n## Table of Contents\n\n- [V-Offline ⚡️](#v-offline-️)\n  - [Features](#features)\n  - [Table of Contents](#table-of-contents)\n  - [Demo](#demo)\n  - [Requirements](#requirements)\n    - [Installation](#installation)\n    - [Build Setup](#build-setup)\n    - [Usage](#usage)\n    - [Example](#example)\n  - [API](#api)\n    - [Props](#props)\n    - [Events](#events)\n  - [Contributing](#contributing)\n  - [Author](#author)\n  - [License](#license)\n\n## Demo\n\n[![Edit v-offline demo](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/v-offline?file=src/App.vue)\n\n## Requirements\n\n- [vue](https://vuejs.org/) `^3.x`\n\n### Installation\n\n```sh\nnpm install --save v-offline ping.js\n```\n\nCDN: [UNPKG](https://unpkg.com/v-offline/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/v-offline/dist/) (available as `window.VOffline`)\n\n### Build Setup\n\n```bash\n# install dependencies\n$ npm install\n\n# package the library\n$ npm run build\n```\n\n### Usage\n\nGlobal component:\n\n```js\n// main.ts\nimport { VOffline } from 'v-offline';\nimport { createApp } from 'vue';\n\nconst app = createApp({});\napp.component('VOffline', VOffline);\n```\n\nOr use locally\n\n```js\n// component.vue\n\u003cscript lang=\"ts\"\u003e\nimport { defineComponent } from 'vue';\nimport { VOffline } from 'v-offline';\n\nexport default defineComponent({\n  components: {\n    VOffline,\n  },\n});\n\u003c/script\u003e\n```\n\nFor Nuxt 3, create a file in `plugins/v-offline.ts`\n\n```js\nimport { VOffline } from 'v-offline';\n\nexport default defineNuxtPlugin((nuxtApp) =\u003e {\n  nuxtApp.vueApp.component('VOffline', VOffline);\n});\n```\n\nthen import the file in `nuxt.config.{j|t}s`:\n\n```js\nexport default {\n  // ...\n  plugins: [\n    // ...\n    { src: '~/plugins/v-offline', mode: 'client' },\n    // ...\n  ],\n  // ...\n};\n```\n\n### Example\n\n```html\n\u003ctemplate\u003e\n  \u003cv-offline\n    online-class=\"online\"\n    offline-class=\"offline\"\n    @detected-condition=\"onNetworkChange\"\n  \u003e\n    \u003ctemplate v-if=\"online\"\u003e\n      \u003cdiv class=\"flex w-full h-full justify-center items-center text-6xl\"\u003e\n        ⚡️\n      \u003c/div\u003e\n    \u003c/template\u003e\n    \u003ctemplate v-if=\"!online\"\u003e\n      \u003cdiv class=\"flex w-full h-full justify-center items-center text-6xl\"\u003e\n        💩\n      \u003c/div\u003e\n    \u003c/template\u003e\n  \u003c/v-offline\u003e\n  \u003c!-- Netlify Badge --\u003e\n  \u003cdiv class=\"absolute bottom-4 right-4\"\u003e\n    \u003ca\n      href=\"https://app.netlify.com/sites/v-offline/deploys\"\n      aria-label=\"View deploys on Netlify\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      class=\"gray-400\"\n    \u003e\n      \u003cimg\n        src=\"https://www.netlify.com/img/global/badges/netlify-color-accent.svg\"\n        alt=\"Deploys by Netlify\"\n      /\u003e\n    \u003c/a\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\n  import { defineComponent, ref } from 'vue';\n  import type { Ref } from 'vue';\n  import { VOffline } from 'v-offline';\n\n  export default defineComponent({\n    components: {\n      VOffline,\n    },\n    setup() {\n      const online: Ref\u003cboolean\u003e = ref(false);\n      const onNetworkChange = (status: boolean) =\u003e {\n        online.value = status;\n      };\n      return { online, onNetworkChange };\n    },\n  });\n\u003c/script\u003e\n\u003cstyle\u003e\n  @import 'v-github-icon/dist/v-github-icon.css';\n\u003c/style\u003e\n```\n\n## API\n\n### Props\n\n| Name            | Type   | Required? | Default            | Description                                                 |\n| --------------- | ------ | --------- | ------------------ | ----------------------------------------------------------- |\n| `online-class`  | String | No        | ''                 | Styling the `div` which you want to give if you're online.  |\n| `offline-class` | String | No        | ''                 | Styling the `div` which you want to give if you're offline. |\n| `ping-url`      | String | No        | https://google.com | Pinging any url to double check if you're online or not.    |\n\n### Events\n\n| Name                  | Returns | Description           |\n| --------------------- | ------- | --------------------- |\n| `@detected-condition` | String  | Emits a boolean value |\n\n## Contributing\n\n1. Fork it ( [https://github.com/vinayakkulkarni/v-offline/fork](https://github.com/vinayakkulkarni/v-offline/fork) )\n2. Create your feature branch (`git checkout -b feat/new-feature`)\n3. Commit your changes (`git commit -Sam 'feat: add feature'`)\n4. Push to the branch (`git push origin feat/new-feature`)\n5. Create a new [Pull Request](https://github.com/vinayakkulkarni/v-offline/compare)\n\n_Note_:\n\n1. Please contribute using [GitHub Flow](https://web.archive.org/web/20191104103724/https://guides.github.com/introduction/flow/)\n2. Commits \u0026 PRs will be allowed only if the commit messages \u0026 PR titles follow the [conventional commit standard](https://www.conventionalcommits.org/), _read more about it [here](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional#type-enum)_\n3. PS. Ensure your commits are signed. _[Read why](https://withblue.ink/2020/05/17/how-and-why-to-sign-git-commits.html)_\n\n## Author\n\n**v-offline** \u0026copy; [Vinayak](https://vinayakkulkarni.dev), Released under the [MIT](./LICENSE) License.\u003cbr\u003e\nAuthored and maintained by Vinayak Kulkarni with help from contributors ([list](https://github.com/vinayakkulkarni/v-offline/contributors)).\n\n\u003e [vinayakkulkarni.dev](https://vinayakkulkarni.dev) · GitHub [@vinayakkulkarni](https://github.com/vinayakkulkarni) · Twitter [@\\_vinayak_k](https://twitter.com/_vinayak_k)\n\n## License\n\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fvinayakkulkarni%2Fv-offline.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fvinayakkulkarni%2Fv-offline?ref=badge_large)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinayakkulkarni%2Fv-offline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvinayakkulkarni%2Fv-offline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinayakkulkarni%2Fv-offline/lists"}