{"id":13623375,"url":"https://github.com/posva/pinia-colada","last_synced_at":"2026-02-22T23:20:21.086Z","repository":{"id":213334259,"uuid":"733836243","full_name":"posva/pinia-colada","owner":"posva","description":"🍹 The smart data fetching layer for Vue","archived":false,"fork":false,"pushed_at":"2026-01-12T09:47:49.000Z","size":4872,"stargazers_count":1907,"open_issues_count":11,"forks_count":68,"subscribers_count":12,"default_branch":"main","last_synced_at":"2026-01-12T13:54:57.935Z","etag":null,"topics":["cache","data-fetching","mutation","pinia","pinia-plugin","plugin","query","swr","vue"],"latest_commit_sha":null,"homepage":"https://pinia-colada.esm.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/posva.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/funding.yml","license":"LICENSE","code_of_conduct":".github/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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"posva"}},"created_at":"2023-12-20T08:37:26.000Z","updated_at":"2026-01-12T09:47:52.000Z","dependencies_parsed_at":"2024-01-16T10:30:45.461Z","dependency_job_id":"87779cac-0659-4d28-9834-497995091da4","html_url":"https://github.com/posva/pinia-colada","commit_stats":{"total_commits":572,"total_committers":12,"mean_commits":"47.666666666666664","dds":"0.10664335664335667","last_synced_commit":"e17bd5d2b8a3aa0f54fc095ab5f62cccbe2d75a4"},"previous_names":["posva/pinia-colada"],"tags_count":150,"template":false,"template_full_name":null,"purl":"pkg:github/posva/pinia-colada","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fpinia-colada","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fpinia-colada/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fpinia-colada/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fpinia-colada/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/posva","download_url":"https://codeload.github.com/posva/pinia-colada/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fpinia-colada/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28601286,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T09:39:28.479Z","status":"ssl_error","status_checked_at":"2026-01-20T09:38:10.511Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["cache","data-fetching","mutation","pinia","pinia-plugin","plugin","query","swr","vue"],"created_at":"2024-08-01T21:01:31.038Z","updated_at":"2026-01-20T10:01:45.627Z","avatar_url":"https://github.com/posva.png","language":"TypeScript","funding_links":["https://github.com/sponsors/posva"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"240\" src=\"https://github.com/posva/pinia-colada/assets/664177/02011637-f94d-4a35-854a-02f7aed86a3c\" alt=\"Pinia Colada logo\"\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://npmjs.com/package/@pinia/colada\"\u003e\n    \u003cimg src=\"https://badgen.net/npm/v/@pinia/colada/latest\" alt=\"npm package\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/posva/pinia-colada/actions/workflows/ci.yml\"\u003e\n    \u003cimg src=\"https://github.com/posva/pinia-colada/actions/workflows/ci.yml/badge.svg\" alt=\"build status\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://codecov.io/gh/posva/pinia-colada\"\u003e\n    \u003cimg src=\"https://codecov.io/gh/posva/pinia-colada/branch/main/graph/badge.svg?token=OZc0DBze2R\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\n# Pinia Colada\n\n\u003e The missing data fetching layer for Vue. Built on top of [Pinia](https://pinia.vuejs.org)\n\nPinia Colada makes data fetching in Vue applications a breeze. It's built on top of [Pinia](https://pinia.vuejs.org) and takes away all of the complexity and boilerplate that comes with fetching data. It's fully typed and tree-shakeable, and it's built with the same principles as Pinia and Vue: It's approachable, flexible, powerful and can be progressively adopted.\n\n\u003e [!TIP]\n\u003e This is a feature-complete version of the exercises from [Mastering Pinia](https://masteringpinia.com/?utm=pinia-colada-readme). If you would like to learn how it started and become an expert in Vue state management, check it out!\n\u003e\n\u003e \u003ca href=\"https://masteringpinia.com/?utm=pinia-colada-readme\"\u003e\n\u003e \u003cimg src=\"https://github.com/posva/pinia-colada/assets/664177/2f7081a5-90fe-467a-b021-7e709f71603e\" width=\"200\" alt=\"Mastering Pinia banner\"\u003e\n\u003e \u003c/a\u003e\n\n## Features\n\n- ⚡️ **Automatic caching**: Smart client-side caching with request deduplication\n- 🗄️ **Async State**: Simplified async state management\n- 🔌 **Plugins**: Powerful plugin system\n- ✨ **Optimistic Updates**: UI that updates before the server responds\n- 💡 **Sensible defaults**: Works well out of the box while remaining fully configurable\n- 🧩 **Out-of-the box plugins**: Auto refetch, delay loading, and more\n- 📚 **Typescript Support**: Best-in-class TypeScript support\n  \u003c!-- - 📡 **Network Status**: Handle network status and offline support --\u003e\n  \u003c!-- - 🛠 **Devtools**: Integration with the Vue devtools --\u003e\n- 💨 **Small Bundle Size**: A baseline of ~2kb and fully tree-shakeable\n- 📦 **Zero Dependencies**: No dependencies other than Pinia\n- ⚙️ **SSR**: Out of the box server-side rendering support\n\n\u003e [!NOTE]\n\u003e Pinia Colada is always trying to improve and evolve.\n\u003e Feedback regarding new and existing options and features is very welcome!\n\u003e Contribution to documentation, issues, and pull requests are highly appreciated.\n\n## Installation\n\n```sh\nnpm install pinia @pinia/colada\n```\n\nInstall the plugins for the features you need:\n\n```ts\nimport { createPinia } from 'pinia'\nimport { PiniaColada } from '@pinia/colada'\n\napp.use(createPinia())\n// install after pinia\napp.use(PiniaColada, {\n  // optional options\n})\n```\n\n## Usage\n\nThe core of Pinia Colada is the `useQuery` and `useMutation` functions. They are used to read data and write it respectively. Here's a simple example:\n\n```vue\n\u003cscript lang=\"ts\" setup\u003e\nimport { useRoute } from 'vue-router'\nimport { useMutation, useQuery, useQueryCache } from '@pinia/colada'\nimport { patchContact, getContactById } from '~/api/contacts'\n\nconst route = useRoute()\nconst queryCache = useQueryCache()\n\nconst { data: contact, isPending } = useQuery({\n  // unique key for the query in the cache\n  key: () =\u003e ['contacts', route.params.id],\n  query: () =\u003e getContactById(route.params.id),\n})\n\nconst { mutate: updateContact, isLoading } = useMutation({\n  mutation: patchContact,\n  async onSettled({ id }) {\n    // invalidate the query to refetch the data of the query above\n    await queryCache.invalidateQueries({ key: ['contacts', id], exact: true })\n  },\n})\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003csection\u003e\n    \u003cp v-if=\"isPending\"\u003eLoading...\u003c/p\u003e\n    \u003cContactCard\n      v-else\n      :key=\"contact.id\"\n      :contact=\"contact\"\n      :is-updating=\"isLoading\"\n      @update:contact=\"updateContact\"\n    /\u003e\n  \u003c/section\u003e\n\u003c/template\u003e\n```\n\nLearn more about the core concepts and how to use them in the [documentation](https://pinia-colada.esm.dev).\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposva%2Fpinia-colada","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fposva%2Fpinia-colada","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposva%2Fpinia-colada/lists"}