\n \n\n# Pinia Colada\n\n> 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> [!TIP]\n> 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>\n> \n> \n> \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 \n \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> [!NOTE]\n> Pinia Colada is always trying to improve and evolve.\n> Feedback regarding new and existing options and features is very welcome!\n> 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\n\n\n \n
Loading...
\n \n \n\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","readmeFilename":""}
![\"build](\"https://github.com/posva/pinia-colada/actions/workflows/ci.yml/badge.svg\"){kind=icon}
\n ![](\"https://codecov.io/gh/posva/pinia-colada/branch/main/graph/badge.svg?token=OZc0DBze2R\"/){kind=icon}
\n