# ValdresScope

Signature
`<ValdresScope scope-id?: string :initialize?: Function>`

valdres-vue
Create an isolated child store for a Vue subtree

Creates a scoped store that inherits state from the parent but can override values independently. Components inside the scope read and write to the scoped store.

## Usage

```vue
<script setup>
import { ValdresScope } from "valdres-vue"
</script>

<template>
  <ValdresScope scope-id="modal">
    <ModalContent />
  </ValdresScope>
</template>
```

## Props

| Prop         | Type                               | Description                                     |
| ------------ | ---------------------------------- | ----------------------------------------------- |
| `scopeId`    | `string`                           | Optional identifier. Auto-generated if omitted. |
| `initialize` | `(txn) => void \| [Atom, value][]` | Optional callback to set initial values.        |

## Initializing state

```vue
<template>
  <ValdresScope scope-id="edit" :initialize="init">
    <EditForm />
  </ValdresScope>
</template>

<script setup>
import { ValdresScope } from "valdres-vue"
import { nameAtom, emailAtom } from "./store"

const init = (txn) => {
    txn.set(nameAtom, "Draft")
    txn.set(emailAtom, "")
}
</script>
```

## Cleanup

The scope is automatically cleaned up when the component is destroyed.

## See also

- [Scoped Stores](https://valdres.dev/guides/scoped-stores) — full guide on scoped stores
- [createValdres](https://valdres.dev/vue/createValdres) — provide a store to your component tree