{"id":13392497,"url":"https://github.com/eldomagan/vuex-orm-localforage","last_synced_at":"2026-01-12T09:40:01.725Z","repository":{"id":42224526,"uuid":"155703886","full_name":"eldomagan/vuex-orm-localforage","owner":"eldomagan","description":"Vuex ORM persistence plugin to sync the store against IndexedDB using localforage","archived":false,"fork":false,"pushed_at":"2023-01-06T01:36:49.000Z","size":887,"stargazers_count":58,"open_issues_count":20,"forks_count":9,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-02-17T11:36:13.120Z","etag":null,"topics":["indexeddb","localforage","vue","vuex","vuex-orm","vuex-orm-plugin","vuex-plugin"],"latest_commit_sha":null,"homepage":null,"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/eldomagan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-01T11:18:26.000Z","updated_at":"2023-08-17T12:30:43.000Z","dependencies_parsed_at":"2023-02-05T01:46:00.697Z","dependency_job_id":null,"html_url":"https://github.com/eldomagan/vuex-orm-localforage","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eldomagan%2Fvuex-orm-localforage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eldomagan%2Fvuex-orm-localforage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eldomagan%2Fvuex-orm-localforage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eldomagan%2Fvuex-orm-localforage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eldomagan","download_url":"https://codeload.github.com/eldomagan/vuex-orm-localforage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243459106,"owners_count":20294340,"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":["indexeddb","localforage","vue","vuex","vuex-orm","vuex-orm-plugin","vuex-plugin"],"created_at":"2024-07-30T17:00:23.791Z","updated_at":"2026-01-12T09:40:01.717Z","avatar_url":"https://github.com/eldomagan.png","language":"JavaScript","funding_links":[],"categories":["Plugins"],"sub_categories":[],"readme":"[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n[![License](https://img.shields.io/npm/l/vuex-orm-localforage.svg)](https://github.com/eldomagan/vuex-orm-localforage/blob/master/LICENSE.md)\n\n# Vuex ORM Plugin: LocalForage\n\nVuexORMLocalforage is a plugin for the amazing [VuexORM](https://github.com/vuex-orm/vuex-orm) that let you sync your [Vuex](https://github.com/vuejs/vuex) Store with an IndexedDB database using [LocalForage](https://github.com/localForage/localForage).\n\n## Installation\n\nAdd the package to your dependencies\n\n```shell\nyarn add vuex-orm-localforage\n```\nOr\n\n```shell\nnpm install --save vuex-orm-localforage\n```\n\nThen you can setup the plugin\n\n``` js\nimport VuexORM from '@vuex-orm/core'\nimport VuexORMLocalForage from 'vuex-orm-localforage'\n\nconst database = new VuexORM.Database()\n\nVuexORM.use(VuexORMLocalForage, {\n  database\n})\n\n// ...\n\nexport default () =\u003e new Vuex.Store({\n  namespaced: true,\n  plugins: [VuexORM.install(database)]\n})\n\n```\n\nSee https://vuex-orm.github.io/vuex-orm/guide/prologue/getting-started.html#create-modules on how to setup the database\n\n## Actions\n\nThis plugin add some vuex actions to load and persist data in an IndexedDB\n\n| Action  | Description |\n| ------- | ----------- |\n| $fetch  | Load data from the IndexedDB store associated to a model and persist them in the Vuex Store |\n| $get    | Load data by id from the IndexedDB store associated and persist it to Vuex Store |\n| $create | Like VuexORM `insertOrUpdate`, but also persist data to IndexedDB |\n| $update | Update records using VuexORM `update` or `insertOrUpdate` then persist changes to IndexedDB |\n| $replace | Like VuexORM `create`, but also replace all data from IndexedDB |\n| $delete | Like VuexORM `delete`, but also remove data from IndexedDB |\n| $deleteAll | Like VuexORM `deleteAll`, but also delete all data from IndexedDB |\n\n## Example Usage\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cinput type=\"text\" v-model=\"todo\"\u003e\n    \u003cinput type=\"button\" @click=\"addTodo\"\u003e\n\n    \u003cul\u003e\n      \u003cli v-for=\"todo in todos\" :key=\"todo.id\"\u003e{{ todo.title }}\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import Todo from './store/models/Todo'\n\n  export default {\n    data () {\n      return {\n        todo: ''\n      }\n    },\n\n    computed: {\n      todos () {\n        return Todo.query().all()\n      }\n    },\n\n    async mounted () {\n      // Load todos from IndexedDB\n      await Todo.$fetch()\n    },\n\n    methods: {\n      addTodo () {\n        if (this.todo) {\n          // Insert the todo in VuexORM Store and also persist it to IndexedDB\n          Todo.$create({\n            title: this.todo\n          })\n        }\n      }\n    }\n  }\n\u003c/script\u003e\n```\n## Configuration Options\n\nThese are options you can pass when calling VuexORM.use()\n\n```js\n{\n  // The VuexORM Database instance\n  database,\n\n  /**\n   * LocalForage config options\n   *\n   * @see https://github.com/localForage/localForage#configuration\n   */\n  localforage: {\n    name: 'vuex', // Name is required\n    ...\n  },\n\n  /**\n   * You can override names of actions introduced by this plugin\n   */\n  actions: {\n    $get: '$get',\n    $fetch: '$fetch',\n    $create: '$create',\n    $update: '$update',\n    $replace: '$replace',\n    $delete: '$delete',\n    $deleteAll: '$deleteAll'\n  }\n}\n```\n\nYou can also override localforage config per model\n\n```js\nclass Post extends Model {\n  static localforage = {\n    driver: localforage.WEBSQL,\n    storeName: 'my_posts'\n  }\n}\n```\n\n## Using with other VuexORM Plugin\n\nThere may be a conflict when using this plugin along with other VuexORM plugins as they are following the same API (aka they introduced the same actions: $fetch, $create...)\n\n\nJust override actions names like that\n\n```js\nVuexORM.use(VuexORMLocalForage, {\n  database,\n  actions: {\n    $get: '$getFromLocal',\n    $fetch: '$fetchFromLocal',\n    $create: '$createLocally',\n    $update: '$updateLocally',\n    $replace: '$replaceLocally',\n    $delete: '$deleteFromLocal',\n    $deleteAll: '$deleteAllFromLocal'\n  }\n})\n```\n\nThen\n\n```js\nPost.$fetchFromLocal() // instead of Post.$fetch()\n...\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feldomagan%2Fvuex-orm-localforage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feldomagan%2Fvuex-orm-localforage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feldomagan%2Fvuex-orm-localforage/lists"}