### NanoStores Plugin Setup

Source: https://context7.com/nanostores/alpine/llms.txt

Configure the all-in-one Alpine.js plugin to register `x-nano`, `x-nano-model`, and `$nano` magics. This is the recommended setup.

```javascript
import Alpine from 'alpinejs'
import { NanoStores } from '@nanostores/alpine'
import { atom, map } from 'nanostores'

// Create your stores
const $counter = atom(0)
const $user = map({ name: 'Alice', role: 'user' })

// Expose stores as Alpine magics for use in HTML expressions
Alpine.magic('counter', () => $counter)
Alpine.magic('user', () => $user)

// Register the full plugin
Alpine.plugin(NanoStores)
Alpine.start()
```

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

### Install Nano Stores Alpine

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

Install the necessary packages for Nano Stores Alpine integration using npm.

```sh
npm install nanostores alpinejs @nanostores/alpine
```

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

### Setup Nano Stores Alpine Plugin

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

Set up the Nano Stores plugin for Alpine.js by importing and registering it. This enables Nano Stores directives and magic properties.

```js
import Alpine from 'alpinejs'
import { NanoStores } from '@nanostores/alpine'

Alpine.plugin(NanoStores)
Alpine.start()
```

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

### x-nano-model Store Setup

Source: https://context7.com/nanostores/alpine/llms.txt

Expose `atom` stores as Alpine magics to be used with the `x-nano-model` directive for two-way data binding.

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

const $email = atom('')
const $agreed = atom(false)
const $color = atom('blue')

Alpine.magic('email', () => $email)
Alpine.magic('agreed', () => $agreed)
Alpine.magic('color', () => $color)
```

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

### Computed Store Setup for x-nano

Source: https://context7.com/nanostores/alpine/llms.txt

Define computed stores and expose them as Alpine magics for use with the `x-nano` directive.

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

const $base = atom(10)
const $doubled = computed($base, v => v * 2)

Alpine.magic('base', () => $base)
Alpine.magic('doubled', () => $doubled)
```

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

### Combine Store Reads with Mutations

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

Combine reading store values with mutations directly within Alpine.js template expressions. This example shows incrementing a counter store using its `set` method.

```html
<div x-data x-nano:count="$counter">
  <span x-text="count"></span>
  <button @click="$counter.set(count + 1)">+</button>
</div>
```

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

### Create Alpine Components with Nano Stores using withStores

Source: https://context7.com/nanostores/alpine/llms.txt

The `withStores` helper creates an Alpine.js `x-data` factory that subscribes to Nano Stores. Store values are injected into the component's initial state and kept in sync. Subscriptions are managed automatically on component init and destroy.

```javascript
import Alpine from 'alpinejs'
import { withStores } from '@nanostores/alpine/with-stores'
import { atom, map } from 'nanostores'

// Define stores
const $clicks = atom(0)
const $lastAction = atom('')
const $cart = atom([])
const $profile = map({ name: 'Alice', role: 'user' })

// Dashboard component with multiple stores
Alpine.data(
  'dashboard',
  withStores({ total: $clicks, lastAction: $lastAction }, () => ({
    click(label) {
      $clicks.set($clicks.get() + 1)
      $lastAction.set(`Button ${label}`)
    },
    reset() {
      $clicks.set(0)
      $lastAction.set('')
    }
  }))
)

// Shopping cart component with methods
Alpine.data(
  'shoppingCart',
  withStores({ cart: $cart, profile: $profile }, ({ cart, profile }) => ({
    // Initial values available in factory
    initialCount: cart.length,

    get cartCount() {
      return this.cart.length
    },

    get greeting() {
      return `Hi, ${this.profile.name}`
    },

    addItem(item) {
      $cart.set([...this.cart, item])
    },

    clearCart() {
      $cart.set([])
    },

    // Lifecycle hooks are preserved
    init() {
      console.log('Cart initialized with', this.cart.length, 'items')
      this.$watch('cart', (val) => {
        console.log('Cart changed:', val)
      })
    },

    destroy() {
      console.log('Cart component destroyed')
    }
  }))
)

Alpine.start()
```

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

### Usage of Alpine Components Created with withStores

Source: https://context7.com/nanostores/alpine/llms.txt

Demonstrates how to use Alpine.js components defined with the `withStores` helper. The component's state, including store values and methods, is directly available within the `x-data` directive.

```html
<!-- Dashboard component usage -->
<div x-data="dashboard">
  <p>Total clicks: <strong x-text="total"></strong></p>
  <p>Last action: <strong x-text="lastAction || '—'"></strong></p>
  <button @click="click('A')">Click A</button>
  <button @click="click('B')">Click B</button>
  <button @click="reset()">Reset</button>
</div>

<!-- Shopping cart component usage -->
<div x-data="shoppingCart">
  <header x-text="greeting"></header>
  <p x-text="cartCount + ' items in cart'"></p>
  <ul>
    <template x-for="item in cart" :key="item">
      <li x-text="item"></li>
    </template>
  </ul>
  <button @click="addItem('Product ' + (cartCount + 1))">Add Item</button>
  <button @click="clearCart()">Clear</button>
</div>
```

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

### Register Individual Nano Stores Plugins

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

Alternatively, register individual Nano Stores plugins for directives (x-nano, x-nano-model) or magic properties ($nano) separately.

```js
import { directivePlugin, magicPlugin } from '@nanostores/alpine'

// Registers x-nano and x-nano-model directives
Alpine.plugin(directivePlugin)

// Registers $nano magic property
Alpine.plugin(magicPlugin)
```

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

### Inject Stores as Typed Initial State

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

Use the `withStores` helper to inject Nano Stores as typed initial state into an Alpine.js component. This keeps store logic out of the template and provides reactive properties and methods.

```js
import Alpine from 'alpinejs'
import { withStores } from '@nanostores/alpine/with-stores'
import { $cart, $profile } from './stores.js'

Alpine.data(
  'header',
  withStores({ cart: $cart, profile: $profile }, ({ cart, profile }) => ({
    get cartCount() {
      return this.cart.length
    },
    get greeting() {
      return `Hi, ${this.profile.name}`
    },
    clearCart() {
      $cart.set([])
    }
  }))
)
```

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

### x-nano Directive Usage

Source: https://context7.com/nanostores/alpine/llms.txt

Use the `x-nano` directive to bind Nano Stores to Alpine.js scopes. Subscriptions are automatically cleaned up.

```html
<!-- Basic atom store binding -->
<div x-data x-nano:count="$counter">
  <p>Count: <strong x-text="count"></strong></p>
  <button @click="$counter.set(count + 1)">+</button>
  <button @click="$counter.set(count - 1)">−</button>
  <button @click="$counter.set(0)">Reset</button>
</div>
```

```html
<!-- Map store binding with nested properties -->
<div x-data x-nano:profile="$user">
  <p>Name: <strong x-text="profile.name"></strong></p>
  <p>Role: <strong x-text="profile.role"></strong></p>
  <button @click="$user.setKey('role', 'admin')">Make Admin</button>
  <button @click="$user.setKey('role', 'user')">Make User</button>
</div>
```

```html
<!-- Multiple stores on one element -->
<div x-data x-nano:count="$counter" x-nano:user="$user">
  <span x-text="user.name + ' has count: ' + count"></span>
</div>
```

```html
<!-- Computed stores -->
<div x-data x-nano:doubled="$doubled">
  <span x-text="'Doubled: ' + doubled"></span>
</div>
```

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

### Selective Registration of Alpine.js Plugins

Source: https://context7.com/nanostores/alpine/llms.txt

Register individual Nano Stores plugins for Alpine.js to optimize bundle size. Choose to register only the directive, the magic property, or the component helper as needed.

```javascript
import Alpine from 'alpinejs'
import { directivePlugin, modelDirectivePlugin, magicPlugin } from '@nanostores/alpine'
import { withStores } from '@nanostores/alpine/with-stores'

// Register only x-nano directive (378 B)
Alpine.plugin(directivePlugin)

// Register only x-nano-model directive
Alpine.plugin(modelDirectivePlugin)

// Register only $nano magic property (448 B)
Alpine.plugin(magicPlugin)

// Or combine specific plugins
Alpine.plugin(directivePlugin)
Alpine.plugin(magicPlugin)

Alpine.start()
```

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

### Bind Multiple Stores to One Element

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

Bind multiple Nano Stores to a single Alpine.js element using multiple `x-nano` directives. Each store is assigned to a distinct scope property.

```html
<div x-data x-nano:count="$counter">
  <span x-text="count"></span>
</div>
```

```html
<div x-data x-nano:user="$user" x-nano:cart="$cart">
  <span x-text="user.name"></span>
  <span x-text="cart.length + ' items'"></span>
</div>
```

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

### Two-Way Binding with x-nano-model

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

Use the `x-nano-model` directive for two-way binding between a form input and an atom store. Changes in the input update the store, and store changes update the input.

```html
<div x-data x-nano-model:name="$name">
  <input x-model="name" />
  <p x-text="'Hello, ' + name"></p>
</div>
```

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

### Alpine Component Using Injected Stores

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

An Alpine.js component template that utilizes the properties and methods defined by the `withStores` helper, such as `greeting`, `cartCount`, and `clearCart`.

```html
<header x-data="header">
  <span x-text="greeting"></span>
  <span x-text="cartCount + ' items'"></span>
  <button @click="clearCart">Clear</button>
</header>
```

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

### Bind Reactive Store to Element Scope

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

Use the `x-nano` directive to bind a Nano Store to a named scope property on an Alpine.js element. This makes the store reactive and accessible to child expressions.

```html
<div x-data x-nano:user="$profile">
  <header>Hi, <strong x-text="user.name"></strong>!</header>
</div>
```

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

### Inline Store Access with Magic Property

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

Access Nano Store values inline within any Alpine.js expression using the `$nano()` magic property. This is useful for attribute bindings and one-off reads without `x-data`.

```html
<span x-text="$nano($counter)"></span>
<span x-text="$nano($user).name"></span>
<span x-show="$nano($cart).length > 0">Cart is not empty</span>
<button :disabled="$nano($isLoading)">Save</button>
```

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

### Access Nano Store Values with $nano Magic Property

Source: https://context7.com/nanostores/alpine/llms.txt

Use the `$nano` magic property to access and display current store values directly within your Alpine.js templates. It automatically subscribes to changes, triggering reactive updates. Useful for attribute bindings and one-off reads.

```html
<span x-data x-text="$nano($counter)"></span>
```

```html
<span x-data x-text="$nano($user).name"></span>
```

```html
<div x-data>
  <p x-show="$nano($cart).length === 0">Cart is empty.</p>
  <ul x-show="$nano($cart).length > 0">
    <template x-for="item in $nano($cart)" :key="item">
      <li x-text="item"></li>
    </template>
  </ul>
  <button @click="$cart.set([...$nano($cart), 'Item ' + ($nano($cart).length + 1)])">
    Add item
  </button>
  <button @click="$cart.set([])">Clear cart</button>
</div>
```

```html
<button x-data :disabled="$nano($isLoading)">Save</button>
```

```html
<div x-data>
  <button
    :disabled="$nano($isLoading) || !$nano($isValid)"
    :class="{ 'opacity-50': $nano($isLoading) }"
    @click="submit()">
    <span x-show="!$nano($isLoading)">Submit</span>
    <span x-show="$nano($isLoading)">Loading...</span>
  </button>
</div>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.