{"id":22486242,"url":"https://github.com/filrak/vue-offline","last_synced_at":"2025-08-02T19:31:20.345Z","repository":{"id":31402777,"uuid":"127751075","full_name":"filrak/vue-offline","owner":"filrak","description":"Offline states and storage for Vue PWA","archived":true,"fork":false,"pushed_at":"2022-12-08T05:40:28.000Z","size":780,"stargazers_count":350,"open_issues_count":16,"forks_count":21,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-30T17:53:25.414Z","etag":null,"topics":["javascript","offline","online","pwa","states","vue","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/filrak.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-02T12:07:59.000Z","updated_at":"2024-09-19T07:58:22.000Z","dependencies_parsed_at":"2023-01-14T19:00:36.210Z","dependency_job_id":null,"html_url":"https://github.com/filrak/vue-offline","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filrak%2Fvue-offline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filrak%2Fvue-offline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filrak%2Fvue-offline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filrak%2Fvue-offline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/filrak","download_url":"https://codeload.github.com/filrak/vue-offline/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228500077,"owners_count":17929997,"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":["javascript","offline","online","pwa","states","vue","vuejs"],"created_at":"2024-12-06T17:14:11.531Z","updated_at":"2024-12-06T17:15:38.291Z","avatar_url":"https://github.com/filrak.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Vue Offline\n\nThis library allows you to enhance offline capabilities of your Vue.js application. It's especially useful when you're building offline-first Progressive Web Apps or just want to inform your users that they lost internet connection. \n\n**TL;DR** Adds `isOnline` `isOffline` data properties, `online`, `offline` events via global mixin and enables offline storage via `Vue.$offlineStorage` based on Local Storage\n\n- [Installation](#installation)\n- [Capabilities](#capabilities)\n    - [VueOfflineMixin](#vueofflinemixin)\n    - [VueOfflineStorage](#vueofflinestorage)\n\nInitially made for [Vue Storefront](https://github.com/DivanteLtd/vue-storefront)\n\n## Installation\nTo install this package as a plugin just type:\n````\nnpm install vue-offline --save\n````\n\nand add it into your application with\n````js\nimport VueOffline from 'vue-offline'\n\nVue.use(VueOffline)\n````\n\n## Capabilities\nThis plugin contains two features:\n\n### VueOfflineMixin\nGlobal mixin that'll add following properties to every component in your application:\n\n- `isOnline` \u0026 `isOffline` data properties\n````html\n\u003ctemplate\u003e\n    \u003cp v-if=\"isOnline\"\u003eThis part will be visible only if user is online\u003c/p\u003e\n    \u003cp v-if=\"isOffline\"\u003eThis part will be visible only if user is offline\u003c/p\u003e\n\u003c/template\u003e\n````\n````js\nexport default {\n    name: 'MyComponent',\n    computed: {\n        networkStatus () {\n            return this.isOnline ? 'My network is fine' : 'I am offline'\n        }\n    }\n}\n````\n- `online` and `offline` events in every component\n````js\nexport default {\n    name: 'MyComponent',\n    mounted () {\n        this.$on('offline', () =\u003e {\n            alert('You are offline! The website will not work')\n        })\n    }\n}\n````\n\n### Additional configuration\n\nBy default `VueOfflineMixin` is injected into every component which may be a cause of potential performance problems. You can disable this behavior by setting plugin option `mixin` to `false`. \n````js\nVue.use(VueOffline, {\n    mixin: false\n})\n````\n\nYou can still make use of `VueOfflineMixin` by injecting it directly into your components:\n````js \nimport { VueOfflineMixin } from 'vue-offline'\n\nexport default {\n    name: 'MyComponent',\n    mixins: [VueOfflineMixin],\n    computed: {\n        networkStatus () {\n            return this.isOnline ? 'My network is fine' : 'I am offline'\n        }\n    },\n    mounted () {\n        this.$on('offline', () =\u003e {\n            alert('You are offline! The website will not work')\n        })\n    }\n}\n````\n### VueOfflineStorage \n Offline storage that uses [local storage](https://developer.mozilla.org/pl/docs/Web/API/Window/localStorage) to persist data for offline usage and caching. It's a perfect choice for offline-first PWA. You can use it as a fallback for failed network requests or a local cache. \n\nThe storage object has following properties: \n- `set(key, value)` - puts (or updates if already exists) `value` into storage under key `key`.\n- `get(key)` - returns value stored under key `key`\n- `keys` - return array of keys existing in your offline storage\n\nTo use this storage inside your app you can either\n-  use `this.$offlineStorage` from Vue instance property in your components:\n````js\nexport default {\n    methods: {\n        getUserData () {\n            if (this.isOnline) {\n                // make network request that returns 'userData' object\n                this.appData = userData\n                this.$offlineStorage.set('user', userData)\n            } else {\n                this.appData = this.$offlineStorage.get('user')\n            }\n        }\n    }\n}\n````\n- import the `VueOfflineStorage` instance if you want to use it somewhere else (e.g. Vuex store)\n````js\nimport { VueOfflineStorage } from 'vue-offline'\n\nconst cachedData = VueOfflineStorage.get('cached-data')\n\n````\n### Additional configuration\n\nBy default `VueofflineStorage` reference is included into every Vue component. You can disable this behavior by setting plugin option `storage` to `false`. \n````js\nVue.use(VueOffline, {\n    storage: false\n})\n````\n\nYou can still make use of `VueOfflineStorage` by importing it directly into your components:\n````js \nimport { VueOfflineStorage } from 'vue-offline'\n\nexport default {\n    name: 'MyComponent',\n    methods: {\n        getUserData () {\n            if (this.isOnline) {\n                // make network request that returns 'userData' object\n                this.appData = userData\n                VueOfflineStorage.set('user', userData)\n            } else {\n                this.appData = VueOfflineStorage.get('user')\n            }\n        }\n    }\n}\n````\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilrak%2Fvue-offline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffilrak%2Fvue-offline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilrak%2Fvue-offline/lists"}