https://github.com/ragokan/kogara
Tiny and fast state management library for VueJS
https://github.com/ragokan/kogara
state-management typescript vue vue3 vue3-composition-api vue3-typescript vuejs
Last synced: 3 months ago
JSON representation
Tiny and fast state management library for VueJS
- Host: GitHub
- URL: https://github.com/ragokan/kogara
- Owner: ragokan
- License: mit
- Created: 2022-02-24T20:27:59.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2025-08-08T15:18:38.000Z (10 months ago)
- Last Synced: 2025-10-23T11:42:01.221Z (8 months ago)
- Topics: state-management, typescript, vue, vue3, vue3-composition-api, vue3-typescript, vuejs
- Language: TypeScript
- Homepage: https://kogara.vercel.app
- Size: 905 KB
- Stars: 13
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Kogara
## Tiny and fast state management library for VueJS
### For all docs, _[click here.](https://kogara.vercel.app)_
### Installation
To install `Kogara`, you can use the following command:
```
pnpm install @kogara/core
```
### Register the plugin
```ts
import { KogaraPlugin } from "@kogara/core";
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
// Register the plugin here
app.use(KogaraPlugin);
app.mount("#app");
```
### Create a store
Creating a store is very straightforward. You simply use Vue/reactivity methods and return the ones you want to expose.
```ts
import { defineStore } from "@kogara/core";
import { computed, ref, watch } from "vue";
// Give store a name for devtools
export const useCounterStore = defineStore("counterStore", () => {
// It is just a Vue ref
const count = ref(0);
// It is just a Vue computed
const doubledCount = computed(() => count.value * 2);
const increment = () => count.value++;
// You can also use other reactivity functions here
watch(count, (newCount) => {
console.log(`Count changed to ${newCount}`);
});
return { count, doubledCount, increment };
});
```
### Use the store
```html
Kogara in Vue
Count: {{ count }}
Doubled Count: {{ doubledCount }}
Increment
import { useCounterStore } from "./stores/counterStore";
// You can destructure just like a regular object.
const { count, doubledCount, increment } = useCounterStore();
```