{"id":19152326,"url":"https://github.com/nanostores/vue","last_synced_at":"2025-08-21T17:31:57.587Z","repository":{"id":43879754,"uuid":"417215077","full_name":"nanostores/vue","owner":"nanostores","description":"Vue integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores","archived":false,"fork":false,"pushed_at":"2023-09-27T22:35:51.000Z","size":1088,"stargazers_count":46,"open_issues_count":3,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-04-20T08:20:40.412Z","etag":null,"topics":["devtools","nanostores","state","state-management","store","vue","vue-devtools","vue3","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/nanostores.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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}},"created_at":"2021-10-14T17:01:36.000Z","updated_at":"2024-06-18T16:49:43.921Z","dependencies_parsed_at":"2024-06-18T16:59:40.615Z","dependency_job_id":null,"html_url":"https://github.com/nanostores/vue","commit_stats":{"total_commits":163,"total_committers":5,"mean_commits":32.6,"dds":0.1595092024539877,"last_synced_commit":"0ebec323e5aff155efb9381ae0ab0bac92944f15"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nanostores%2Fvue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nanostores%2Fvue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nanostores%2Fvue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nanostores%2Fvue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nanostores","download_url":"https://codeload.github.com/nanostores/vue/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230523761,"owners_count":18239445,"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":["devtools","nanostores","state","state-management","store","vue","vue-devtools","vue3","vuejs"],"created_at":"2024-11-09T08:17:28.379Z","updated_at":"2024-12-20T02:06:46.973Z","avatar_url":"https://github.com/nanostores.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nano Stores Vue\n\n\u003cimg align=\"right\" width=\"92\" height=\"92\" title=\"Nano Stores logo\"\n     src=\"https://nanostores.github.io/nanostores/logo.svg\"\u003e\n\nVue integration for **[Nano Stores]**, a tiny state manager\nwith many atomic tree-shakable stores.\n\n* **Small.** Less than 1 KB with all helpers. Zero dependencies.\n* **Fast.** With small atomic and derived stores, you do not need to call\n  the selector function for all components on every store change.\n* **Tree Shakable.** The chunk contains only stores used by components\n  in the chunk.\n* **Helpers.** Designed to keep code clean and save a few keystrokes.\n* **Devtools.** Plugin with full support of [Vue Devtools].\n* Was designed to move logic from components to stores.\n* It has good **TypeScript** support.\n\n\n## Install\n\n```sh\nnpm install @nanostores/vue\n```\n\n\n## Usage\n\n### Store state\n\nSubscribe to store changes and use reactive store state.\n\n```vue\n\u003ctemplate\u003e\n  \u003cheader\u003e{{ profile.name }}\u003c/header\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n  import { useStore } from '@nanostores/vue'\n  import { $profile } from '../stores/index.js'\n\n  const profile = useStore($profile)\n\u003c/script\u003e\n```\n\n### Multiple store states\n\nCombines multiple stores into a single reactive state.\n\n```vue\n\u003ctemplate\u003e\n  \u003cheader\u003e{{ t.header.title }}\u003c/header\u003e\n  \u003cfooter\u003e{{ t.footer.copyright }}\u003c/footer\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n  import { mapStores } from '@nanostores/vue'\n  import { headerMessages, footerMessages } from '../i18n/index.js'\n\n  const t = mapStores({\n    header: headerMessages,\n    footer: footerMessages\n  })\n\u003c/script\u003e\n```\n\n### Form handling\n\nSince the store state is deep read-only, you cannot directly mutate it.\nBut for `v-model` you can create model via `useVModel(store, keys, opts)`.\nIt will explicitly mutate the store via `store.set()` / `store.setKey()`.\n\n```vue\n\u003ctemplate\u003e\n  \u003cinput v-model=\"username\"/\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n  import { useVModel } from '@nanostores/vue'\n  import { $profile } from '../stores/index.js'\n\n  const username = useVModel($profile, 'username')\n\u003c/script\u003e\n```\n\nThe `keys` argument can be an array of keys to create multiple models.\nEach model will be prefixed with `Model`. You can change it via `opts.prefix`.\n\n```vue\n\u003ctemplate\u003e\n  \u003cinput v-model=\"firstNameModel\"/\u003e\n  \u003cinput v-model=\"lastNameModel\"/\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n  import { useVModel } from '@nanostores/vue'\n  import { $profile } from '../stores/index.js'\n\n  const {\n    firstNameModel,\n    lastNameModel\n  } = useVModel($profile, ['firstName', 'lastName'])\n\u003c/script\u003e\n```\n\n\n## Devtools\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/screenshot.jpg\" alt=\"Nanostores Vue Devtools\" width=\"830\"\u003e\n\u003c/p\u003e\n\n\n### Install\n\n```sh\nnpm install --save-dev @vue/devtools-api @nanostores/logger\n```\n\n\n### Usage\n\n#### Store detector\n\nInstall **[Vue Devtools]** plugin as usual. It will detect nanostores\nin selected component and add their states to the **component inspector**.\n\n```js\nimport { createApp } from 'vue'\nimport { devtools } from '@nanostores/vue/devtools'\n\nconst app = createApp(…)\n\napp.use(devtools)\n```\n\n\u003e Notice: if you are using SSR, there is no Vue Devtools on server.\n\u003e Check it’s a browser environment:\n\u003e ```js\n\u003e if (window) app.use(devtools)\n\u003e ```\n\nAttach stores to add them to the **nanostores inspector**\nand see their builds, lifecycles and changes on the **timeline**.\n\n```js\nimport { createApp } from 'vue'\nimport { devtools } from '@nanostores/vue/devtools'\n\nimport { $user } from '../stores/index.js'\n\nconst app = createApp(…)\n\napp.use(devtools, { 'User': $user })\n```\n\n\n### Plugin Settings\n\n#### Real-time update detection\n\nReal-time update of the states of all detected stores\nin the **component inspector**.\n\n#### Keep unmounted\n\nKeeps all unmounted stores in **Nanostores inspector** tab.\n\n#### Reduce data usage\n\nIn some places hides the full store snapshot to reduce data usage\nand speed up devtools.\n\n[Nano Stores]: https://github.com/nanostores/nanostores/\n[Vue Devtools]: https://devtools.vuejs.org\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnanostores%2Fvue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnanostores%2Fvue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnanostores%2Fvue/lists"}