{"id":23197738,"url":"https://github.com/letstri/vaxee","last_synced_at":"2025-04-07T05:10:04.969Z","repository":{"id":245505487,"uuid":"816406474","full_name":"letstri/vaxee","owner":"letstri","description":"Vaxee is a simple and easy-to-use library for Vue 3 to manage the state of your application.","archived":false,"fork":false,"pushed_at":"2024-12-21T21:46:05.000Z","size":1412,"stargazers_count":64,"open_issues_count":3,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-31T04:07:18.087Z","etag":null,"topics":["pinia","state-management","store","vue"],"latest_commit_sha":null,"homepage":"https://vaxee.letstri.dev","language":"TypeScript","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/letstri.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-17T17:25:20.000Z","updated_at":"2025-03-20T11:00:17.000Z","dependencies_parsed_at":"2025-01-15T18:18:40.755Z","dependency_job_id":"83053652-5f21-4f3e-82ea-57a770e5daf0","html_url":"https://github.com/letstri/vaxee","commit_stats":null,"previous_names":["letstri/vaxee"],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letstri%2Fvaxee","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letstri%2Fvaxee/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letstri%2Fvaxee/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letstri%2Fvaxee/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/letstri","download_url":"https://codeload.github.com/letstri/vaxee/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247595334,"owners_count":20963943,"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":["pinia","state-management","store","vue"],"created_at":"2024-12-18T14:37:14.148Z","updated_at":"2025-04-07T05:10:04.860Z","avatar_url":"https://github.com/letstri.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003ca href=\"https://vaxee.letstri.dev\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\u003cimg height=\"70\" src=\"https://vaxee.letstri.dev/logo.svg\"  alt=\"Vaxee logo\"\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\u003cp  align=\"center\"\u003e\n\u003cstrong\u003eThe State Manager for Vue 3\u003c/strong\u003e\u003cbr\u003eStore your data across whole application\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/vaxee\"\u003e\u003cimg  src=\"https://img.shields.io/npm/v/vaxee.svg?style=for-the-badge\"\u003e\u003c/a\u003e\n\u003ca href=\"https://nixle.letstri.dev\"\u003e\u003cimg  src=\"https://img.shields.io/badge/you_want-vaxee-green?style=for-the-badge\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Overview\n\nVaxee is a simple and easy-to-use library for Vue 3 to manage the state of your application.\n\n- ✨ Simple and intuitive API.\n- 💪 Incredible TypeScript support.\n- 🤯 Includes a `request` function.\n- 🫡 Improved DX with reactivity.\n\n## Documentation\n\nYou can find the documentation and installation steps [on the website](https://vaxee.letstri.dev).\n\n## Demo\n\nLet's create a huge demo store with a user and auth logic.\n\n```ts\nimport { createStore } from \"vaxee\";\nimport { fetchUser, signIn, parseJwt } from \"~/user\";\n\nexport const useUserStore = createStore(\n  \"user\",\n  ({ state, getter, request }) =\u003e {\n    const tokens = state(\n      {\n        access: \"\",\n        refresh: \"\",\n      },\n      {\n        persist: \"user.tokens\",\n      }\n    );\n    const isAuthorized = getter(\n      () =\u003e tokens.value.access \u0026\u0026 tokens.value.refresh\n    );\n    const userId = getter(() =\u003e parseJwt(tokens.value.access).sub);\n\n    const signIn = async (email: string, password: string) =\u003e {\n      tokens.value = await signIn(email, password);\n    };\n\n    const user = request(() =\u003e fetchUser(userId.value));\n\n    return {\n      user,\n      isAuthorized,\n    };\n  }\n);\n```\n\nNow, let's use this store in a component.\n\n```vue\n\u003cscript setup\u003e\nimport { watch } from \"vue\";\nimport { useUserStore } from \"../stores/user\";\n\nconst {\n  isAuthorized,\n  user: { data: user, refresh: refreshUser },\n} = useUserStore();\n\nwatch(isAuthorized, (isAuthorized) =\u003e {\n  if (isAuthorized) {\n    refreshUser();\n  }\n});\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cp\u003eAuthorized: {{ isAuthorized }}\u003c/p\u003e\n    \u003cp\u003eUser: {{ user.firstName }} {{ user.lastName }}\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Author\n\n© [letstri](https://letstri.dev), released under the [MIT](https://github.com/letstri/vaxee/blob/main/LICENSE) license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fletstri%2Fvaxee","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fletstri%2Fvaxee","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fletstri%2Fvaxee/lists"}