🦊 foxstate-vue

Vue bindings for FoxState, a lightweight signal-powered state management library.

foxstate-vue provides a composable that allows Vue components to reactively use FoxState stores.

📦 Installation

Install FoxState core and Vue bindings.

npm install fox-state foxstate-vue

⚡ Quick Example

Create Store

import { createStore } from "fox-state"

export const counter = createStore({
  state: { count: 0 },

  actions: {
    inc: ({ setState, getState }) =>
      setState({ count: getState().count + 1 })
  }
})

Use in Vue Component

import { useStore } from "foxstate-vue"
import { counter } from "./store"

export default {
  setup() {

    const state = useStore(counter)

    return { state, inc: counter.actions.inc }
  }
}

Template

<template>
  <button @click="inc">
    {{ state.count }}
  </button>
</template>

🧠 API

useStore

Composable for subscribing to FoxState stores.

const state = useStore(store)

Example:

const state = useStore(counter)

State updates automatically trigger Vue reactivity.

🔗 Related Packages

| Package | Description | | ---------------- | ----------------- | | fox-state | Core state engine | | foxstate-react | React bindings | | foxstate-svelte | Svelte bindings | | foxstate-vanilla | Vanilla adapter |

📜 License

MIT