# Source: https://stately.ai/docs/xstate-store/vue.mdx

# @xstate/store-vue (/docs/xstate-store/vue)
The `@xstate/store-vue` package provides Vue bindings for [XState Store](/docs/xstate-store). It includes composables for subscribing to store state as reactive refs.

<Callout>
  This package re-exports all of `@xstate/store`, so you only need to install `@xstate/store-vue`.
</Callout>

## Installation

<Tabs items={['npm', 'pnpm', 'yarn']}>
  <Tab value="npm" label="npm">
    ```bash
    npm install @xstate/store-vue
    ```
  </Tab>

  <Tab value="pnpm" label="pnpm">
    ```bash
    pnpm install @xstate/store-vue
    ```
  </Tab>

  <Tab value="yarn" label="yarn">
    ```bash
    yarn add @xstate/store-vue
    ```
  </Tab>
</Tabs>

## Quick start

```vue
<script setup>
import { createStore, useSelector } from '@xstate/store-vue';

const store = createStore({
  context: { count: 0 },
  on: {
    inc: (context, event: { by?: number }) => ({
      count: context.count + (event.by ?? 1),
    }),
  },
});

const count = useSelector(store, (state) => state.context.count);
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="store.trigger.inc()">+1</button>
    <button @click="store.trigger.inc({ by: 5 })">+5</button>
  </div>
</template>
```

## API

### `useSelector(store, selector?, compare?)`

Creates a reactive ref that subscribes to a store and returns a selected value.

```vue
<script setup>
import { useSelector } from '@xstate/store-vue';

// Select specific value
const count = useSelector(store, (state) => state.context.count);

// With custom comparison function
const user = useSelector(
  store,
  (state) => state.context.user,
  (prev, next) => prev.id === next.id
);

// Without selector (returns full snapshot)
const snapshot = useSelector(store);
</script>

<template>
  <div>Count: {{ count }}</div>
</template>
```

**Parameters:**

* `store` - The store to subscribe to
* `selector` - Optional function to select a value from the store snapshot. If not provided, returns the full snapshot.
* `compare` - Optional comparison function (defaults to strict equality `===`)

**Returns:** A read-only ref containing the selected value

## Full documentation

For complete XState Store documentation including context, transitions, effects, atoms, and more, see the [XState Store docs](/docs/xstate-store).