### Basic Setup Usage Example

Source: https://github.com/nanostores/vue/blob/main/_autodocs/api-reference/devtools.md

This example shows the basic setup for integrating Nanostores Devtools by simply calling `app.use(devtools)` without attaching any specific stores initially.

```APIDOC
## Usage Example: Basic Setup

### Description
Installs the Nanostores devtools plugin with default settings, enabling the inspector tab without pre-attaching specific stores.

### Code
```javascript
import { createApp } from 'vue'
import { devtools } from '@nanostores/vue/devtools'

const app = createApp(App)

// Install devtools plugin (no stores initially attached)
app.use(devtools)
```
```

--------------------------------

### SSR Setup for Vue Application

Source: https://github.com/nanostores/vue/blob/main/_autodocs/integration-guide.md

Example of setting up a Vue application for server-side rendering with @nanostores/vue. Ensure devtools are disabled on the server and stores use synchronous get().

```javascript
// main-server.js
import { createApp } from 'vue'
import { renderToString } from '@vue/server-renderer'

export async function render(url) {
  const app = createApp(App)
  
  // No devtools on server (devtools checks for window)
  // Stores work with synchronous get()
  
  return renderToString(app)
}
```

--------------------------------

### Usage Example for Server-Side Rendering

Source: https://github.com/nanostores/vue/blob/main/_autodocs/api-reference/devtools.md

Provides an example of how to safely install the Nanostores Devtools plugin in a server-side rendering (SSR) environment by checking for the existence of `window` before execution.

```APIDOC
## Usage Example: Server-Side Rendering

### Description
Ensures the devtools plugin is only installed in a browser environment to prevent errors during server-side rendering.

### Code
```javascript
import { createApp } from 'vue'
import { devtools } from '@nanostores/vue/devtools'

const app = createApp(App)

// Check for browser environment before installing devtools
if (typeof window !== 'undefined') {
  app.use(devtools, { $store })
}
```
```

--------------------------------

### Install Nanostores and Vue Integration

Source: https://github.com/nanostores/vue/blob/main/_autodocs/integration-guide.md

Install the necessary packages for Nanostores and its Vue integration using npm.

```bash
npm install nanostores @nanostores/vue
```

--------------------------------

### Basic Setup with Logging Enabled

Source: https://github.com/nanostores/vue/blob/main/_autodocs/configuration.md

Configures the devtools plugin to log all state changes and lifecycle events for specified stores.

```javascript
import { createApp } from 'vue'
import { devtools } from '@nanostores/vue/devtools'
import { $profile, $settings } from './stores/index.js'

const app = createApp(App)

app.use(devtools, { $profile, $settings }, {
  messages: {
    change: true,   // Show all state changes in timeline
    mount: true,    // Show mount/unmount events
    unmount: true
  }
})
```

--------------------------------

### Devtools Plugin Usage Examples

Source: https://github.com/nanostores/vue/blob/main/_autodocs/types.md

Illustrates different ways to configure and use the devtools plugin, from minimal setup to custom inspector state callbacks.

```typescript
import { createApp } from 'vue'
import { devtools } from '@nanostores/vue/devtools'
import { $userCreator, $profile } from './stores/index.js'

const app = createApp(App)

// Minimal configuration
app.use(devtools, { $profile })

// With logging options
app.use(devtools, { $profile }, {
  messages: {
    change: true,
    mount: true
  }
})

// With custom inspector state callback
app.use(devtools, { $userCreator }, {
  getCreatorInspectorState: (payload, creator, { reduceDataUsage }) => {
    if (!reduceDataUsage) {
      payload.state.Debug = {
        cacheKeys: Object.keys(creator.cache),
        cacheSize: Object.keys(creator.cache).length
      }
    }
  },
  messages: {
    build: true
  }
})
```

--------------------------------

### useVModel Usage Examples

Source: https://github.com/nanostores/vue/blob/main/_autodocs/types.md

Demonstrates how to use the useVModel function with default and custom prefixes for generated refs.

```typescript
import { useVModel } from '@nanostores/vue'
import { $user } from './stores/user.js'

// Use default 'Model' prefix
const { nameModel, ageModel } = useVModel($user, ['name', 'age'])

// Use custom 'Form' prefix
const { nameForm, ageForm } = useVModel($user, ['name', 'age'], {
  prefix: 'Form'
})

// Use custom 'Field' prefix
const { nameField, ageField } = useVModel($user, ['name', 'age'], {
  prefix: 'Field'
})
```

--------------------------------

### Basic Devtools Setup

Source: https://github.com/nanostores/vue/blob/main/_autodocs/api-reference/devtools.md

Install the Nanostores devtools plugin for your Vue application. This enables the basic Nanostores inspector tab in Vue Devtools.

```javascript
import { createApp } from 'vue'
import { devtools } from '@nanostores/vue/devtools'

const app = createApp(App)

// Install devtools plugin (no stores initially attached)
app.use(devtools)
```

--------------------------------

### Install Nano Stores Vue

Source: https://github.com/nanostores/vue/blob/main/README.md

Install the Nano Stores Vue integration package using npm.

```sh
npm install @nanostores/vue
```

--------------------------------

### Usage Example: Multiple Keys

Source: https://github.com/nanostores/vue/blob/main/_autodocs/api-reference/use-v-model.md

Shows how to bind multiple store properties to input elements using `v-model` with `useVModel`.

```APIDOC
## Usage Example: Multiple Keys

```vue
<template>
  <form>
    <input v-model="firstNameModel" placeholder="First name" />
    <input v-model="lastNameModel" placeholder="Last name" />
    <input v-model="emailModel" placeholder="Email" />
  </form>
</template>

<script setup>
import { useVModel } from '@nanostores/vue'
import { $profile } from '../stores/profile.js'

// Creates refs prefixed with 'Model': firstNameModel, lastNameModel, emailModel
const { emailModel, firstNameModel, lastNameModel } = useVModel($profile, [
  'firstName',
  'lastName',
  'email'
])
</script>
```
```

--------------------------------

### Usage Example: Custom Prefix

Source: https://github.com/nanostores/vue/blob/main/_autodocs/api-reference/use-v-model.md

Illustrates how to customize the prefix for generated refs when using `useVModel` with multiple keys.

```APIDOC
## Usage Example: Custom Prefix

```vue
<template>
  <form>
    <input v-model="ageTestValue" />
    <input v-model="nameTestValue" />
  </form>
</template>

<script setup>
import { useVModel } from '@nanostores/vue'
import { $user } from '../stores/user.js'

// Custom prefix 'TestValue' instead of 'Model'
const { ageTestValue, nameTestValue } = useVModel($user, ['age', 'name'], {
  prefix: 'TestValue'
})
</script>
```
```

--------------------------------

### Install Devtools Dependencies

Source: https://github.com/nanostores/vue/blob/main/README.md

Install the necessary packages for Vue Devtools integration with Nano Stores.

```sh
npm install --save-dev @vue/devtools-api @nanostores/logger
```

--------------------------------

### Usage Example with Attached Stores

Source: https://github.com/nanostores/vue/blob/main/_autodocs/api-reference/devtools.md

Demonstrates how to attach specific Nanostores instances or creators to the Devtools inspector by passing an object of stores as the second argument to `app.use(devtools)`.

```APIDOC
## Usage Example: With Attached Stores

### Description
Attaches specified stores to the Nanostores inspector tab by providing an object mapping store names to store instances or creators.

### Code
```javascript
import { createApp } from 'vue'
import { devtools } from '@nanostores/vue/devtools'
import { $user, $settings, $router } from './stores/index.js'

const app = createApp(App)

// Attach stores to the Nanostores inspector tab
app.use(devtools, {
  $router,
  $settings,
  $user
})
```
```

--------------------------------

### Setup Vue Devtools - Basic

Source: https://github.com/nanostores/vue/blob/main/_autodocs/quick-reference.md

Enable the Vue Devtools integration by using the `devtools` plugin. This provides insights into your nanostores directly in the browser's devtools.

```javascript
import { devtools } from '@nanostores/vue/devtools'

app.use(devtools)
```

--------------------------------

### Usage Example: Single Key

Source: https://github.com/nanostores/vue/blob/main/_autodocs/api-reference/use-v-model.md

Demonstrates how to use `useVModel` to bind a single store property to an input element using `v-model`.

```APIDOC
## Usage Example: Single Key

```vue
<template>
  <input v-model="username" />
</template>

<script setup>
import { useVModel } from '@nanostores/vue'
import { $profile } from '../stores/profile.js'

// Creates a writable ref for the 'username' property
const username = useVModel($profile, 'username')

// username.value changes → $profile store is updated via store.setKey('username', value)
// $profile store is updated elsewhere → username.value reflects the change
</script>
```
```

--------------------------------

### Usage Example with Logging Options

Source: https://github.com/nanostores/vue/blob/main/_autodocs/api-reference/devtools.md

Shows how to configure logging behavior for Nanostores Devtools, such as logging store builds, changes, mounts, and unmounts, by passing a `messages` object in the `devtools` options.

```APIDOC
## Usage Example: With Logging Options

### Description
Configures the devtools plugin to log specific lifecycle events and state changes by providing a `messages` object within the `devtools` options.

### Code
```javascript
import { createApp } from 'vue'
import { devtools } from '@nanostores/vue/devtools'
import { $user } from './stores/index.js'

const app = createApp(App)

// Configure logging behavior
app.use(devtools, { $user }, {
  messages: {
    build: true,    // Log store builds (creators)
    change: true,   // Log state changes
    mount: true,    // Log mount events
    unmount: true   // Log unmount events
  }
})
```
```

--------------------------------

### Setup Vue Devtools - With Stores

Source: https://github.com/nanostores/vue/blob/main/_autodocs/quick-reference.md

Provide specific stores to the `devtools` plugin to monitor them individually. This allows for focused debugging.

```javascript
import { devtools } from '@nanostores/vue/devtools'
import { $user, $ui } from './stores'

app.use(devtools, {
  $ui,
  $user
})
```

--------------------------------

### Server-Side Rendering (SSR) Devtools Setup

Source: https://github.com/nanostores/vue/blob/main/_autodocs/api-reference/devtools.md

Conditionally install the Nanostores devtools plugin only in a browser environment to prevent errors during server-side rendering. This ensures the plugin is only active when Vue Devtools is available.

```javascript
import { createApp } from 'vue'
import { devtools } from '@nanostores/vue/devtools'

const app = createApp(App)

// Check for browser environment before installing devtools
if (typeof window !== 'undefined') {
  app.use(devtools, { $store })
}
```

--------------------------------

### Basic useStore Example

Source: https://github.com/nanostores/vue/blob/main/_autodocs/api-reference/use-store.md

Use this snippet to create a reactive reference to a Nanostores atom or map store within a Vue 3 component. Ensure the store is imported and accessible.

```vue
<template>
  <header>{{ profile.value.name }}</header>
  <p>{{ profile.value.email }}</p>
</template>

<script setup>
import { useStore } from '@nanostores/vue'
import { $profile } from '../stores/profile.js'

// $profile is an atom or map store containing { name: string, email: string }
const profile = useStore($profile)
</script>
```

--------------------------------

### Usage Example: Entire Store

Source: https://github.com/nanostores/vue/blob/main/_autodocs/api-reference/use-v-model.md

Demonstrates binding the entire store value to an input element using `v-model` by omitting the `keys` parameter in `useVModel`.

```APIDOC
## Usage Example: Entire Store

```vue
<template>
  <div>
    <input type="text" v-model="profileForm" />
  </div>
</template>

<script setup>
import { useVModel } from '@nanostores/vue'
import { $profile } from '../stores/profile.js'

// No key specified - binds the entire store value
const profileForm = useVModel($profile)

// profileForm.value = { name: 'Jane', email: 'jane@example.com' } 
// → updates entire store via store.set()
</script>
```
```

--------------------------------

### Vue Devtools Plugin Setup

Source: https://github.com/nanostores/vue/blob/main/_autodocs/README.md

Integrates Nanostores with Vue Devtools for debugging. Pass your stores and optional configuration to the `devtools` plugin.

```typescript
function devtools(
  app: App,
  stores?: { [key: string]: AnyStore | MapCreator },
  opts?: DevtoolsOptions
): void
```

```javascript
import { createApp } from 'vue'
import { devtools } from '@nanostores/vue/devtools'
import { $user, $settings } from './stores'

const app = createApp(App)

app.use(devtools, { $settings, $user }, {
  messages: { change: true, mount: true }
})
```

--------------------------------

### Vue Devtools Integration Setup

Source: https://github.com/nanostores/vue/blob/main/_autodocs/integration-guide.md

Sets up Vue Devtools integration for Nano Stores in a Vue application's main entry point. This should only be done in development environments.

```javascript
import { createApp } from 'vue'
import { devtools } from '@nanostores/vue/devtools'
import App from './App.vue'
import { $user, $ui, $todos } from './stores/index.js'

const app = createApp(App)

// Install devtools in development
if (process.env.NODE_ENV === 'development') {
  app.use(devtools, {
    $todos,
    $ui,
    $user
  }, {
    messages: {
      change: true,
      mount: true
    }
  })
}

app.mount('#app')
```

--------------------------------

### Setup Vue Devtools - With Logging

Source: https://github.com/nanostores/vue/blob/main/_autodocs/quick-reference.md

Configure the `devtools` plugin to log specific store events like changes, mounts, and unmounts. This helps in understanding store lifecycle.

```javascript
app.use(devtools, { $store }, {
  messages: {
    change: true,   // Log changes
    mount: true,    // Log mounts
    unmount: true,  // Log unmounts
    build: true     // Log builds
  }
})
```

--------------------------------

### useStore with Map Store Example

Source: https://github.com/nanostores/vue/blob/main/_autodocs/api-reference/use-store.md

Demonstrates using `useStore` with a Nanostores map store that has specific fields. This is useful for accessing structured data within your Vue components.

```vue
<template>
  <div>
    <h1>{{ user.value.fullname }}</h1>
    <p>Username: {{ user.value.username }}</p>
    <p>Artworks: {{ user.value.artworks }}</p>
  </div>
</template>

<script setup>
import { useStore } from '@nanostores/vue'
import { $user } from '../stores/user.js'

// $user is a map store with specific fields
const user = useStore($user)
</script>
```

--------------------------------

### Use useStore to Get Reactive State

Source: https://github.com/nanostores/vue/blob/main/_autodocs/README.md

Use the `useStore` utility to subscribe to store changes and get reactive state within a Vue component. Ensure the store is imported.

```vue
<script setup>
import { useStore } from '@nanostores/vue'
import { $profile } from './stores'

const profile = useStore($profile)
</script>

<template>
  <h1>{{ profile.value.name }}</h1>
</template>
```

--------------------------------

### Usage Example for Custom Inspector State

Source: https://github.com/nanostores/vue/blob/main/_autodocs/api-reference/devtools.md

Illustrates how to customize the state displayed in the Nanostores inspector for creator-derived stores by providing a `getCreatorInspectorState` function in the `devtools` options.

```APIDOC
## Usage Example: Custom Inspector State

### Description
Customizes the state displayed in the Nanostores inspector for a specific creator-derived store by implementing the `getCreatorInspectorState` option.

### Code
```javascript
import { createApp } from 'vue'
import { devtools } from '@nanostores/vue/devtools'
import { $userCreator } from './stores/index.js'

const app = createApp(App)

app.use(devtools, { $userCreator }, {
  getCreatorInspectorState: (payload, creator, { reduceDataUsage }) => {
    // Customize what's shown in the inspector for this creator
    if (!reduceDataUsage) {
      payload.state.CustomData = {
        cacheSize: Object.keys(creator.cache).length,
        cacheKeys: Object.keys(creator.cache)
      }
    }
  }
})
```
```

--------------------------------

### Testing Vue Components with Stores

Source: https://github.com/nanostores/vue/blob/main/_autodocs/integration-guide.md

Example of testing a Vue component that uses @nanostores/vue. Includes resetting the store after each test using `afterEach` and `$count.set(0)`.

```typescript
import { cleanup, render, screen } from '@testing-library/vue'
import { afterEach } from 'vitest'
import Counter from './Counter.vue'
import { $count } from '../stores/counter.js'

afterEach(() => {
  cleanup()
  $count.set(0) // Reset store
})

test('increments count', async () => {
  render(Counter)
  
  const button = screen.getByRole('button', { name: '+' })
  await button.click()
  
  expect(screen.getByText('Count: 1')).toBeInTheDocument()
})
```

--------------------------------

### Using Store Types in Your Code

Source: https://github.com/nanostores/vue/blob/main/_autodocs/types.md

Provides an example of how to use imported store types like Store, StoreValue, and MapCreator in custom TypeScript functions and store definitions.

```typescript
import type { Store, StoreValue, MapCreator } from 'nanostores'
import { useStore, useVModel, devtools } from '@nanostores/vue'

// Type a custom store parameter
function myHelper<T extends Store>(store: T): StoreValue<T> {
  const state = useStore(store)
  return state.value as StoreValue<T>
}

// Type a creator function
const myCreator: MapCreator = (id: string) => {
  // Return a store instance
  return map({ id })
}
```

--------------------------------

### Map Different Store Types with mapStores

Source: https://github.com/nanostores/vue/blob/main/_autodocs/api-reference/map-stores.md

Demonstrates mapping various Nanostores store types (atom, map, etc.) into a single reactive object. Access individual store values using `.value` in script setup.

```vue
<template>
  <div>
    <h1>{{ stores.user.value.name }}</h1>
    <p>{{ stores.settings.value.theme }}</p>
    <p>Count: {{ stores.counter.value }}</p>
  </div>
</template>

<script setup>
import { mapStores } from '@nanostores/vue'
import { $user } from '../stores/user.js'
import { $settings } from '../stores/settings.js'
import { $counter } from '../stores/counter.js'

// Maps atom, map, and other store types into one object
const stores = mapStores({
  counter: $counter,
  settings: $settings,
  user: $user
})
</script>
```

--------------------------------

### Check Store Value in Vue

Source: https://github.com/nanostores/vue/blob/main/_autodocs/quick-reference.md

Log the current value of a Nano Store using the `get()` method. Ensure the store is accessible as `$store` in your component context.

```javascript
console.log($store.get())
```

--------------------------------

### useStore Basic Usage

Source: https://github.com/nanostores/vue/blob/main/_autodocs/quick-reference.md

Use the `useStore` hook to get a reactive reference to a nanostore's value within a Vue component. Access the value via `.value`.

```vue
<script setup>
import { useStore } from '@nanostores/vue'
import { $store } from './stores'

// Basic
const state = useStore($store)

// Access value
console.log(state.value)

// In template
</script>

<template>
  {{ state.value }}
</template>
```

--------------------------------

### Type Definition: DevtoolsOptions

Source: https://github.com/nanostores/vue/blob/main/_autodocs/quick-reference.md

Defines the options available for the `devtools` setup, including custom inspector functions and message logging configurations.

```typescript
interface DevtoolsOptions {
  getCreatorInspectorState?: (payload, creator, opts) => void
  messages?: {
    change?: boolean
    mount?: boolean
    unmount?: boolean
    build?: boolean
  }
}
```

--------------------------------

### Import Core Utilities and Devtools

Source: https://github.com/nanostores/vue/blob/main/_autodocs/quick-reference.md

Import the main utilities for managing stores and the devtools plugin from the @nanostores/vue package.

```javascript
// Main utilities
import { useStore, mapStores, useVModel, registerStore } from '@nanostores/vue'

// Devtools plugin
import { devtools } from '@nanostores/vue/devtools'
```

--------------------------------

### Setup Vue Devtools - With Custom Inspector

Source: https://github.com/nanostores/vue/blob/main/_autodocs/quick-reference.md

Extend the Vue Devtools inspector by providing a `getCreatorInspectorState` function. This allows you to display custom state information for your stores.

```javascript
app.use(devtools, { $store }, {
  getCreatorInspectorState(payload, creator) {
    payload.state.Custom = creator.cache
  }
})
```

--------------------------------

### Define Multiple Nanostores with map

Source: https://github.com/nanostores/vue/blob/main/_autodocs/integration-guide.md

Create multiple related stores using nanostores 'map' for managing application state like user and UI settings.

```javascript
import { map } from 'nanostores'

export const $user = map({
  id: null,
  name: 'Guest',
  role: 'user'
})

export const $ui = map({
  sidebarOpen: true,
  theme: 'light',
  notifications: []
})

export const $api = map({
  loading: false,
  error: null
})
```

--------------------------------

### Initialize Vue Devtools Plugin

Source: https://github.com/nanostores/vue/blob/main/README.md

Use the `devtools` function from `@nanostores/vue/devtools` to enable Nano Stores detection in Vue Devtools.

```js
import { createApp } from 'vue'
import { devtools } from '@nanostores/vue/devtools'

const app = createApp(…)

app.use(devtools)
```

--------------------------------

### Create a Simple Counter Store

Source: https://github.com/nanostores/vue/blob/main/_autodocs/integration-guide.md

Define a basic counter store using nanostores 'atom' and export increment/decrement functions.

```javascript
import { atom } from 'nanostores'

export const $count = atom(0)

export function increment() {
  $count.set($count.get() + 1)
}

export function decrement() {
  $count.set($count.get() - 1)
}
```

--------------------------------

### Correct Store Value Mutation

Source: https://github.com/nanostores/vue/blob/main/_autodocs/integration-guide.md

Demonstrates the correct way to update a store's value using `setKey()` to ensure reactivity, contrasting it with incorrect direct mutation.

```javascript
// ✗ Wrong - direct mutation
$user.value.name = 'John'

// ✓ Correct
$user.setKey('name', 'John')
```

--------------------------------

### Initialize Vue Devtools with Specific Stores

Source: https://github.com/nanostores/vue/blob/main/README.md

Configure the Vue Devtools plugin to explicitly attach and track specific Nano Stores by providing them as an options object.

```js
import { createApp } from 'vue'
import { devtools } from '@nanostores/vue/devtools'

import { $user } from '../stores/index.js'

const app = createApp(…)

app.use(devtools, { 'User': $user })
```

--------------------------------

### Configure Devtools Logging Options

Source: https://github.com/nanostores/vue/blob/main/_autodocs/api-reference/devtools.md

Configure logging behavior for store events like builds, changes, mounts, and unmounts. This helps in debugging store lifecycles and state transitions.

```javascript
import { createApp } from 'vue'
import { devtools } from '@nanostores/vue/devtools'
import { $user } from './stores/index.js'

const app = createApp(App)

// Configure logging behavior
app.use(devtools, { $user }, {
  messages: {
    build: true,    // Log store builds (creators)
    change: true,   // Log state changes
    mount: true,    // Log mount events
    unmount: true   // Log unmount events
  }
})
```

--------------------------------

### Import Main Package Exports

Source: https://github.com/nanostores/vue/blob/main/_autodocs/README.md

Import the core utilities from the main package export.

```javascript
import { useStore, mapStores, useVModel, registerStore } from '@nanostores/vue'
```

--------------------------------

### Vue Nanostores Source Code Reference

Source: https://github.com/nanostores/vue/blob/main/_autodocs/INDEX.md

This snippet outlines the directory structure of the @nanostores/vue repository, indicating the location of main entry points, individual function implementations, and type definitions.

```tree
Repository: /workspace/home/vue/
├── index.js / index.d.ts (main entry)
├── use-store/
│   ├── index.js (useStore, registerStore implementation)
│   └── index.d.ts (types)
├── map-stores/
│   ├── index.js (mapStores implementation)
│   └── index.d.ts (types)
├── use-v-model/
│   ├── index.js (useVModel implementation)
│   └── index.d.ts (types, UseVModelOptions)
├── devtools/
│   ├── index.js (devtools plugin implementation)
│   ├── index.d.ts (types, DevtoolsOptions)
│   └── types.ts (additional type annotations)
└── demo/ (real-world usage examples)
```

--------------------------------

### Define a Form Store with map

Source: https://github.com/nanostores/vue/blob/main/_autodocs/integration-guide.md

Create a Nanostore map to hold form state, including input values and submission logic.

```javascript
import { map } from 'nanostores'

export const $loginForm = map({
  email: '',
  password: '',
  rememberMe: false
})

export async function submitLogin() {
  const { email, password } = $loginForm.get()
  // API call
}
```

--------------------------------

### UseVModelOptions

Source: https://github.com/nanostores/vue/blob/main/_autodocs/types.md

Configuration options for the `useVModel()` function to customize the naming of generated properties. It allows specifying a prefix for generated ref names when mapping multiple keys from a store.

```APIDOC
## UseVModelOptions

### Description
Configuration options for the `useVModel()` function to customize the naming of generated properties.

### Properties

- **prefix** (`Prefix`) - Optional - Custom prefix for generated ref names when mapping multiple keys. For example, with `prefix: 'Form'` and keys `['name', 'email']`, the returned object will have properties `nameForm` and `emailForm`. Defaults to `'Model'`.

### Usage
```typescript
import { useVModel } from '@nanostores/vue'
import { $user } from './stores/user.js'

// Use default 'Model' prefix
const { nameModel, ageModel } = useVModel($user, ['name', 'age'])

// Use custom 'Form' prefix
const { nameForm, ageForm } = useVModel($user, ['name', 'age'], {
  prefix: 'Form'
})

// Use custom 'Field' prefix
const { nameField, ageField } = useVModel($user, ['name', 'age'], {
  prefix: 'Field'
})
```

### Related Functions
- `useVModel()` - Returns refs using this options interface for configuration
```

--------------------------------

### useVModel with Custom Prefix

Source: https://github.com/nanostores/vue/blob/main/_autodocs/quick-reference.md

Customize the generated ref names for `useVModel` by providing a `prefix` option. This is useful for avoiding naming conflicts.

```javascript
const { nameField, emailField } = useVModel(
  $form,
  ['name', 'email'],
  { prefix: 'Field' }
)
```

--------------------------------

### Common Mistake: Devtools on Server

Source: https://github.com/nanostores/vue/blob/main/_autodocs/quick-reference.md

Avoid setting up Vue Devtools directly on the server-side, as it may cause errors. Always check for browser environment before initialization.

```javascript
app.use(devtools, $stores) // May error on SSR
```

```javascript
if (typeof window !== 'undefined') {
  app.use(devtools, $stores)
}
```

--------------------------------

### useVModel for Multiple Key Binding

Source: https://github.com/nanostores/vue/blob/main/_autodocs/quick-reference.md

Bind multiple store keys to input elements by passing an array of keys to `useVModel`. This returns an object with refs for each key.

```vue
<script setup>
import { useVModel } from '@nanostores/vue'
import { $form } from './stores'

const { nameModel, emailModel } = useVModel(
  $form,
  ['name', 'email']
)
</script>

<template>
  <input v-model="nameModel" />
  <input v-model="emailModel" />
</template>
```

--------------------------------

### useStore

Source: https://github.com/nanostores/vue/blob/main/_autodocs/api-reference/use-store.md

Creates a reactive reference to a Nanostores store value in Vue 3. It subscribes to the store and automatically unsubscribes on component unmount.

```APIDOC
## useStore

### Description
Creates a reactive reference to a Nanostores store value in Vue 3. Subscribes to the store and automatically unsubscribes on component unmount.

### Signature
```typescript
export function useStore<SomeStore extends Store, Value extends StoreValue<SomeStore>>(store: SomeStore): DeepReadonly<UnwrapNestedRefs<ShallowRef<Value>>>
```

### Parameters
#### Path Parameters
- **store** (Store) - Required - A Nanostores store instance (atom, map, or computed store)

### Returns
A deep read-only reactive reference wrapping the store's value. The return type is a `ShallowRef` containing the store state, wrapped in `UnwrapNestedRefs` for proper Vue reactivity, and marked as read-only to prevent mutations (in development mode).

**Type**: `DeepReadonly<UnwrapNestedRefs<ShallowRef<Value>>>`

### Behavior
- **Browser environment**: Subscribes to store changes via `store.subscribe()`. Updates to the ref trigger Vue's reactivity system. Unsubscription happens automatically on component unmount via `onScopeDispose()`.
- **SSR/server environment**: Synchronously reads the store's current value with `store.get()`. No subscription is created because there is no reactive context during server rendering.
- **Production mode**: Returns the raw `ShallowRef` without the read-only wrapper for smaller bundle size.
- **Development mode**: Returns the read-only wrapped version for type safety.

### Usage Example
```vue
<template>
  <header>{{ profile.value.name }}</header>
  <p>{{ profile.value.email }}</p>
</template>

<script setup>
import { useStore } from '@nanostores/vue'
import { $profile } from '../stores/profile.js'

// $profile is an atom or map store containing { name: string, email: string }
const profile = useStore($profile)
</script>
```
```

--------------------------------

### mapStores

Source: https://github.com/nanostores/vue/blob/main/_autodocs/README.md

Combines multiple stores into a single reactive object, mapping each store to its own reactive reference.

```APIDOC
## mapStores

### Description
Combines multiple stores into a single reactive object, mapping each store to its own reactive reference.

### Method Signature
```typescript
function mapStores<StoreList extends { [key: string]: AnyStore }>(
  stores: StoreList
): DeepReadonly<UnwrapNestedRefs<{ [StoreName in keyof StoreList]: ShallowRef<StoreValue<...>> }>>
```

### Usage Example
```vue
<script setup>
import { mapStores } from '@nanostores/vue'
import { $header, $footer } from './stores'

const t = mapStores({
  footer: $footer,
  header: $header
})
</script>

<template>
  <header>{{ t.header.value.title }}</header>
  <footer>{{ t.footer.value.copyright }}</footer>
</template>
```
```

--------------------------------

### Store Pattern: Map

Source: https://github.com/nanostores/vue/blob/main/_autodocs/quick-reference.md

Define a store for objects using `map`. Use `.setKey()` to update individual properties and `.get()` to retrieve the entire object.

```javascript
import { map } from 'nanostores'

export const $user = map({ name: '', age: 0 })

$user.setKey('name', 'John')
$user.get() // { name: 'John', age: 0 }
```

--------------------------------

### Syncing Form Input with Store using useVModel

Source: https://github.com/nanostores/vue/blob/main/_autodocs/integration-guide.md

Shows how to correctly synchronize form input changes with a store using `useVModel` in Vue 3's Composition API. Avoids issues with direct `v-model` binding to store values.

```vue
<!-- ✗ Wrong -->
<input v-model="store.value.name" />

<!-- ✓ Correct -->
<script setup>
const { nameModel } = useVModel(store, 'name')
</script>
<template>
  <input v-model="nameModel" />
</template>
```

--------------------------------

### mapStores Function

Source: https://github.com/nanostores/vue/blob/main/_autodocs/api-reference/map-stores.md

Combines multiple Nanostores into a single reactive object. Each store is accessed by its key name, allowing you to manage related stores as a cohesive unit.

```APIDOC
## mapStores

### Description
Combines multiple Nanostores into a single reactive object. Each store is accessed by its key name, allowing you to manage related stores as a cohesive unit.

### Signature
```typescript
export function mapStores<StoreList extends { [key: string]: AnyStore }>(stores: StoreList): DeepReadonly<UnwrapNestedRefs<{ [StoreName in keyof StoreList]: ShallowRef<StoreValue<StoreList[StoreName]>> }>>
```

### Parameters
#### Parameters
- **stores** (`{ [key: string]: AnyStore }`) - Yes - Description: An object where keys are store names and values are Nanostores store instances.

### Returns
A reactive object where each key maps to a `ShallowRef` containing the corresponding store's value. The entire object is wrapped in `DeepReadonly` in development mode to prevent mutations.

**Type**: Each store in the returned object is a reactive reference to its underlying value. Accessing store values is done via `storeName` (not `storeName.value` in the template, but `storeName.value` in script setup).

### Behavior
- Maps each provided store to its own reactive reference using `useStore()` internally
- Wraps the resulting object with `readonly()` in development mode for type safety
- Wraps with `reactive()` in production mode for optimal performance
- Automatically manages subscriptions and unsubscriptions for all stores
- Each store maintains its own subscription lifecycle

### Usage Example
```vue
<template>
  <div>
    <h2>{{ t.header.title }}</h2>
    <p>{{ t.header.subtitle }}</p>
    <footer>
      <p>{{ t.footer.copyright }}</p>
    </footer>
  </div>
</template>

<script setup>
import { mapStores } from '@nanostores/vue'
import { $headerMessages, $footerMessages } from '../i18n/index.js'

const t = mapStores({
  footer: $footerMessages,
  header: $headerMessages
})
</script>
```

### Advanced Example with Multiple Store Types
```vue
<template>
  <div>
    <h1>{{ stores.user.value.name }}</h1>
    <p>{{ stores.settings.value.theme }}</p>
    <p>Count: {{ stores.counter.value }}</p>
  </div>
</template>

<script setup>
import { mapStores } from '@nanostores/vue'
import { $user } from '../stores/user.js'
import { $settings } from '../stores/settings.js'
import { $counter } from '../stores/counter.js'

// Maps atom, map, and other store types into one object
const stores = mapStores({
  counter: $counter,      // atom store
  settings: $settings,    // map store
  user: $user            // another store type
})
</script>
```

### Type Safety
TypeScript infers the type of each mapped store based on its store instance. The resulting object is fully typed, ensuring that accessing incorrect properties or trying to mutate values will produce type errors.

```typescript
// TypeScript will correctly infer types
const mapped = mapStores({
  count: atomStore,    // type is ShallowRef<number>
  user: mapStore       // type is ShallowRef<{ name: string, age: number }>
})

// ✓ Correct
const n = mapped.count.value
// ✗ TypeScript error: 'foo' does not exist
const x = mapped.foo.value
```

### Source
`map-stores/index.js` (lines 5–18)
```

--------------------------------

### useVModel Function Signature

Source: https://github.com/nanostores/vue/blob/main/_autodocs/api-reference/use-v-model.md

The `useVModel` function signature defines its generic types and parameters, including the store instance, optional keys for specific properties, and options for customization.

```APIDOC
## useVModel

### Description
Creates writable computed references for Nanostores store properties, enabling two-way binding with `v-model` directives in Vue templates. Mutations through the returned ref automatically update the underlying store.

### Signature
```typescript
export function useVModel<
  SomeStore extends Store,
  Value extends StoreValue<SomeStore>,
  Keys extends (keyof Value)[] | keyof Value = undefined,
  Prefix extends string = 'Model'
>(
  store: SomeStore,
  keys?: Keys,
  opts?: UseVModelOptions<Prefix>
): Keys extends undefined
  ? Ref<Value>
  : Keys extends (keyof Value)[]
  ? {
      [Key in UnwarpKeys<Keys> as `${Key}${Prefix}`]: Ref<Value[Key]>
    }
  : Ref<Value[Keys]>
```

### Parameters

| Parameter | Type | Required | Default | Description |
|-----------|------|----------|---------|-------------|
| store | `Store` | Yes | — | A Nanostores store instance (must support `set()` and `setKey()` methods) |
| keys | `string \| string[] \| undefined` | No | undefined | Single property key, array of property keys, or undefined to bind the entire store value |
| opts | `UseVModelOptions<Prefix>` | No | `{ prefix: 'Model' }` | Options object to customize the prefix for generated property names |

### Return Type

The return type varies based on the `keys` parameter:

- **No keys** (undefined): Returns `Ref<Value>` — a writable ref to the entire store value
- **Single key** (string): Returns `Ref<Value[Key]>` — a writable ref to the specific property
- **Multiple keys** (string[]): Returns an object with keys like `{propertyNameModel: Ref, ...}` — one ref per key, prefixed with the `Prefix` option value

### Behavior

- **No key specified**: Creates a computed ref that reads/writes the entire store state via `store.set()`
- **Single key specified**: Creates a computed ref that reads/writes the property via `store.setKey(key, value)`
- **Multiple keys specified**: Creates an object with one computed ref per key, each following the naming pattern `${keyName}${Prefix}`
- The computed refs are writable: setting `ref.value = newValue` updates the store
- The getter always reads the current store state, so updates are reactive
```

--------------------------------

### Common Mistake: Direct Mutation

Source: https://github.com/nanostores/vue/blob/main/_autodocs/quick-reference.md

Avoid directly mutating store values. Use the store's provided methods like `.set()` or `.setKey()` for updates.

```javascript
$store.value.name = 'John' // Won't work
```

```javascript
$store.setKey('name', 'John') // Correct
```

--------------------------------

### useVModel for Entire Store Binding

Source: https://github.com/nanostores/vue/blob/main/_autodocs/quick-reference.md

Bind an entire nanostore to a form element by omitting the keys argument in `useVModel`. This treats the store as a single value.

```vue
<script setup>
import { useVModel } from '@nanostores/vue'
import { $form } from './stores'

const formData = useVModel($form) // No keys = entire store
</script>

<template>
  <input v-model="formData" />
</template>
```

--------------------------------

### Configure Vue Devtools Logging

Source: https://github.com/nanostores/vue/blob/main/_autodocs/configuration.md

Configure Vue Devtools to log specific actions and messages for a Nanostore. This is useful for debugging store changes.

```javascript
import { createApp } from 'vue'
import { devtools } from '@nanostores/vue/devtools'
import { $orderCreator } from './stores/orders.js'

const app = createApp(App)

// Configure different logging for different stores
app.use(devtools, { $orderCreator }, {
  action: 'orders',  // Group logs under 'orders' action
  id: 'order-devtools',  // Identify this logging session
  messages: {
    build: true,    // Log when new orders are fetched
    change: true,   // Log price/status changes
    mount: false,   // Don't log individual mount events
    unmount: false
  }
})
```

--------------------------------

### Devtools Options for Event Logging

Source: https://github.com/nanostores/vue/blob/main/_autodocs/README.md

Enable logging for specific events like state changes, mounts, unmounts, and creator builds. This helps in debugging store interactions.

```typescript
interface DevtoolsOptions extends CreatorLoggerOptions, LoggerOptions {
  getCreatorInspectorState?: (
    payload: HookPayloads['getInspectorState'],
    creator: MapCreator,
    opts: { reduceDataUsage: boolean }
  ) => void
}
```

```typescript
app.use(devtools, { $store }, {
  messages: {
    change: true,   // Log state changes
    mount: true,    // Log lifecycle mount events
    unmount: true,  // Log lifecycle unmount events
    build: true     // Log creator builds
  }
})
```

--------------------------------

### Create v-model for Store State in Vue

Source: https://github.com/nanostores/vue/blob/main/README.md

Use `useVModel` to create a reactive model for form inputs that directly mutates a Nano Store via `store.set()` or `store.setKey()`.

```vue
<template>
  <input v-model="username"/>
</template>

<script setup>
  import { useVModel } from '@nanostores/vue'
  import { $profile } from '../stores/index.js'

  const username = useVModel($profile, 'username')
</script>
```

--------------------------------

### Simple Store Subscription in Vue Component

Source: https://github.com/nanostores/vue/blob/main/_autodocs/integration-guide.md

Use the 'useStore' hook to subscribe to a Nanostore atom for read-only access in a Vue component.

```vue
<template>
  <div class="counter">
    <p>Count: {{ count.value }}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script setup>
import { useStore } from '@nanostores/vue'
import { $count, increment, decrement } from '../stores/counter.js'

const count = useStore($count)
</script>
```

--------------------------------

### Use useVModel for Multiple Property Binding

Source: https://github.com/nanostores/vue/blob/main/_autodocs/README.md

Create writable computed refs for form binding with `v-model` for multiple properties of a store. Ensure the store is imported.

```vue
<script setup>
import { useVModel } from '@nanostores/vue'
import { $form } from './stores'

const { nameModel, emailModel } = useVModel($form, ['name', 'email'])
</script>

<template>
  <input v-model="nameModel" />
  <input v-model="emailModel" />
</template>
```

--------------------------------

### DevtoolsOptions

Source: https://github.com/nanostores/vue/blob/main/_autodocs/types.md

Configuration options for the devtools plugin, extending logging options from `@nanostores/logger`. It allows customization of how store state is displayed in the Vue Devtools inspector.

```APIDOC
## DevtoolsOptions

### Description
Configuration options for the devtools plugin, extending both logging and creator logging options from `@nanostores/logger`.

### Properties

- **getCreatorInspectorState** (`Function`) - Optional - Callback function invoked when the devtools inspector requests state for a store creator. Allows customization of what's shown in the inspector. Receives the inspector payload, the creator instance, and options including the `reduceDataUsage` flag.

### Inherited Properties from CreatorLoggerOptions

- **messages** (`{ build?: boolean, change?: boolean, mount?: boolean, unmount?: boolean }`) - Flags to enable/disable logging of specific events.
- **action** (`string`) - Custom action name for grouping related store operations.
- **id** (`string | number`) - Unique identifier for this logging session.

### Inherited Properties from LoggerOptions

Additional logging configuration options from `@nanostores/logger`.

### Usage Examples
```typescript
import { createApp } from 'vue'
import { devtools } from '@nanostores/vue/devtools'
import { $userCreator, $profile } from './stores/index.js'

const app = createApp(App)

// Minimal configuration
app.use(devtools, { $profile })

// With logging options
app.use(devtools, { $profile }, {
  messages: {
    change: true,
    mount: true
  }
})

// With custom inspector state callback
app.use(devtools, { $userCreator }, {
  getCreatorInspectorState: (payload, creator, { reduceDataUsage }) => {
    if (!reduceDataUsage) {
      payload.state.Debug = {
        cacheKeys: Object.keys(creator.cache),
        cacheSize: Object.keys(creator.cache).length
      }
    }
  },
  messages: {
    build: true
  }
})
```

### Related Functions
- `devtools()` - Uses this options interface for configuration
```

--------------------------------

### Store Pattern: Atom

Source: https://github.com/nanostores/vue/blob/main/_autodocs/quick-reference.md

Define a simple, single-value store using `atom`. Use `.set()` to update the value and `.get()` to retrieve it.

```javascript
import { atom } from 'nanostores'

export const $count = atom(0)

$count.set(5)
$count.get() // 5
```

--------------------------------

### useVModel for Single Key Binding

Source: https://github.com/nanostores/vue/blob/main/_autodocs/quick-reference.md

Bind a single store key to an input element using `useVModel`. This creates a reactive ref that works seamlessly with `v-model`.

```vue
<script setup>
import { useVModel } from '@nanostores/vue'
import { $form } from './stores'

const username = useVModel($form, 'username')
</script>

<template>
  <input v-model="username" />
</template>
```

--------------------------------

### Create Multiple v-model Models for Store State in Vue

Source: https://github.com/nanostores/vue/blob/main/README.md

Generate multiple reactive models from an array of keys using `useVModel`, allowing for individual form inputs to bind to specific store properties.

```vue
<template>
  <input v-model="firstNameModel"/>
  <input v-model="lastNameModel"/>
</template>

<script setup>
  import { useVModel } from '@nanostores/vue'
  import { $profile } from '../stores/index.js'

  const {
    firstNameModel,
    lastNameModel
  } = useVModel($profile, ['firstName', 'lastName'])
</script>
```

--------------------------------

### Imported Types from Nanostores

Source: https://github.com/nanostores/vue/blob/main/_autodocs/types.md

Details on types re-exported or used from the `nanostores` package, such as `Store`, `AnyStore`, `StoreValue`, and `MapCreator`.

```APIDOC
## Imported Types from Nanostores

### Description
The library re-exports or uses the following types from the `nanostores` package:

| Type | Source | Description |
|------|--------|-------------|
| `Store` | nanostores | Base type for any store instance (atom, map, computed, etc.) |
| `AnyStore` | nanostores | Type alias for any store variant |
| `StoreValue<T>` | nanostores | Utility type that extracts the value type from a store instance |
| `MapCreator` | nanostores | Type for store creator functions that generate child stores |

### Example: Using Store Types in Your Code
```typescript
import type { Store, StoreValue, MapCreator } from 'nanostores'
import { useStore, useVModel, devtools } from '@nanostores/vue'

// Type a custom store parameter
function myHelper<T extends Store>(store: T): StoreValue<T> {
  const state = useStore(store)
  return state.value as StoreValue<T>
}

// Type a creator function
const myCreator: MapCreator = (id: string) => {
  // Return a store instance
  return map({ id })
}
```
```

--------------------------------

### Production-Safe Configuration

Source: https://github.com/nanostores/vue/blob/main/_autodocs/configuration.md

Conditionally enables the devtools plugin only in development environments to avoid overhead in production.

```javascript
import { createApp } from 'vue'
import { devtools } from '@nanostores/vue/devtools'

const app = createApp(App)

// Only enable devtools in development
if (process.env.NODE_ENV === 'development') {
  const { $user, $router } = await import('./stores/index.js')
  app.use(devtools, { $router, $user }, {
    messages: {
      change: true
    }
  })
}
```