### Get Vuetify 0 Installation Guide

Source: https://github.com/vuetifyjs/0/blob/master/skills/vuetify0/SKILL.md

Retrieve the installation and bootstrap guide for Vuetify 0 using the Vuetify MCP server.

```bash
vuetify-mcp:get_vuetify0_installation_guide
```

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

### Install and Run Vuetify0 Project

Source: https://github.com/vuetifyjs/0/blob/master/README.md

Commands to install dependencies, start the development playground, and run the documentation site for Vuetify0.

```bash
pnpm install
pnpm dev
pnpm dev:docs
```

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

### Setup Local Vuetify0 Development Environment

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/introduction/contributing.md

Clone the repository, install dependencies, and start the development server for Vuetify0. Ensure you have Node 26+ and pnpm 10.6+ installed.

```bash
git clone https://github.com/vuetifyjs/0.git
cd 0
pnpm install
pnpm dev
pnpm dev:docs
```

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

### Get Vuetify 0 Composable Guide

Source: https://github.com/vuetifyjs/0/blob/master/skills/vuetify0/SKILL.md

Fetch the guide for a specific Vuetify 0 composable by its name using the Vuetify MCP server.

```bash
vuetify-mcp:get_vuetify0_composable_guide
```

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

### Initialize a New Vuetify Project

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/guide/tooling/vuetify-cli.md

Use the `vuetify init` command to start a new project with an interactive setup wizard.

```bash
vuetify init
```

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

### Get Vuetify 0 Component Guide

Source: https://github.com/vuetifyjs/0/blob/master/skills/vuetify0/SKILL.md

Fetch the guide for a specific Vuetify 0 component by its name using the Vuetify MCP server.

```bash
vuetify-mcp:get_vuetify0_component_guide
```

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

### Install Vuetify MCP Server (bun)

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/guide/tooling/vuetify-mcp.md

Installs and configures the Vuetify MCP server automatically, detecting your IDE. Use this for a quick and recommended setup.

```bash
bunx @vuetify/mcp config --remote
```

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

### Install RTL Plugin with Options

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/composables/plugins/use-rtl.md

Configure the RTL plugin to start in RTL mode by default.

```typescript
app.use(
  createRtlPlugin({
    default: true, // Start in RTL mode
  })
)
```

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

### Install Vuetify MCP Server (yarn)

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/guide/tooling/vuetify-mcp.md

Installs and configures the Vuetify MCP server automatically, detecting your IDE. Use this for a quick and recommended setup.

```bash
yarn dlx @vuetify/mcp config --remote
```

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

### Install Vuetify MCP Server (npm)

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/guide/tooling/vuetify-mcp.md

Installs and configures the Vuetify MCP server automatically, detecting your IDE. Use this for a quick and recommended setup.

```bash
npx -y @vuetify/mcp config --remote
```

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

### Create Example File

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/CLAUDE.md

Specifies the directory structure for creating example files used with DocsExample.

```vue
src/examples/components/{component}/basic.vue
src/examples/composables/{composable}/basic.vue
src/examples/guide/{guide-name}/example.vue
```

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

### Install Vuetify MCP Server (pnpm)

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/guide/tooling/vuetify-mcp.md

Installs and configures the Vuetify MCP server automatically, detecting your IDE. Use this for a quick and recommended setup.

```bash
pnpm dlx @vuetify/mcp config --remote
```

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

### Install LaunchDarkly SDK

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/composables/plugins/use-features.md

Install the LaunchDarkly JavaScript client SDK using your preferred package manager.

```bash
pnpm add launchdarkly-js-client-sdk
```

```bash
npm install launchdarkly-js-client-sdk
```

```bash
yarn add launchdarkly-js-client-sdk
```

```bash
bun add launchdarkly-js-client-sdk
```

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

### Install Novu Client

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/composables/plugins/use-notifications.md

Install the Novu JavaScript SDK using your preferred package manager.

```bash
pnpm add @novu/js
```

```bash
npm install @novu/js
```

```bash
yarn add @novu/js
```

```bash
bun add @novu/js
```

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

### Install Dependencies with bun

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/guide/integration/devkey.md

Install project dependencies using bun after cloning the repository.

```bash
bun install
```

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

### Theme Picker Example

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/composables/selection/create-single.md

A complete example of a theme picker using `createSingle`. It demonstrates registering multiple themes, selecting them, and how the UI reflects the current selection. This example highlights `ticket.select()`, `ticket.isSelected`, `mandatory: true`, and pre-selection with `seek('first')?.select()`.

```ts
import { createSingle } from '@vuetify/v0'

export const useThemePicker = () => {
  const single = createSingle({ mandatory: true })

  const onboard = () => {
    const tickets = [
      single.register({ id: 'theme-light', value: 'Light' }),
      single.register({ id: 'theme-dark', value: 'Dark' }),
      single.register({ id: 'theme-colored', value: 'Colored' }),
      single.register({ id: 'theme-contrast', value: 'Contrast' }),
      single.register({ id: 'theme-dim', value: 'Dim' }),
    ]

    // Preselect the first item
    single.seek('first')?.select()

    return tickets
  }

  return {
    // Expose the instance for direct use
    single,
    // Expose the registration method
    onboard,
    // Expose derived state for convenience
    selectedValue: single.selectedValue,
    selectedId: single.selectedId,
    selectedIndex: single.selectedIndex,
    size: single.size,
  }
}
```

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

### Plugin Installation for App-wide Composable

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/guide/fundamentals/composables.md

Illustrates how to install a composable as a plugin for app-wide availability via dependency injection.

```typescript
app.use(createSelectionPlugin({ multiple: true }))
```

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

### Install Leonardo Contrast Colors

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/guide/features/palettes.md

Install the necessary package for generating perceptually uniform color ramps with Leonardo.

```bash
pnpm add @adobe/leonardo-contrast-colors
```

```bash
npm install @adobe/leonardo-contrast-colors
```

```bash
yarn add @adobe/leonardo-contrast-colors
```

```bash
bun add @adobe/leonardo-contrast-colors
```

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

### Install Knock Client

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/composables/plugins/use-notifications.md

Install the Knock JavaScript SDK using your preferred package manager.

```bash
pnpm add @knocklabs/client
```

```bash
npm install @knocklabs/client
```

```bash
yarn add @knocklabs/client
```

```bash
bun add @knocklabs/client
```

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

### Install RTL Plugin

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/composables/plugins/use-rtl.md

Install the RTL plugin in your app's entry point.

```typescript
import { createApp } from 'vue'
import { createRtlPlugin } from '@vuetify/v0'
import App from './App.vue'

const app = createApp(App)

app.use(createRtlPlugin())

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

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

### Install Dependencies with pnpm

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/guide/integration/devkey.md

Install project dependencies using pnpm after cloning the repository.

```bash
pnpm install
```

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

### Install Tailwind CSS with bun

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/introduction/getting-started.md

Install Tailwind CSS and its Vite plugin using bun.

```bash
bun add -D tailwindcss @tailwindcss/vite
```

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

### Install PostHog SDK

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/composables/plugins/use-features.md

Install the PostHog JavaScript SDK using your preferred package manager.

```bash
pnpm add posthog-js
```

```bash
npm install posthog-js
```

```bash
yarn add posthog-js
```

```bash
bun add posthog-js
```

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

### Basic useLazy Setup

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/composables/system/use-lazy.md

Import and use the `useLazy` composable with a reactive source. `isBooted` tracks if the content has been activated, `hasContent` indicates if there's content to render, and `onAfterLeave` can be used to reset the lazy state.

```ts
import { shallowRef } from 'vue'
import { useLazy } from '@vuetify/v0'

const isOpen = shallowRef(false)

const { isBooted, hasContent, onAfterLeave } = useLazy(isOpen)

// hasContent becomes true after isOpen is first set to true
// onAfterLeave resets lazy state for transition integration
```

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

### Basic useHotkey Examples

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/composables/system/use-hotkey.md

Demonstrates registering simple key combinations, sequences, and hotkeys with input support. Use this for global shortcuts or context-specific bindings.

```vue
<script setup lang="ts">
  import { useHotkey } from '@vuetify/v0'
  import { ref } from 'vue'

  const commandPaletteOpen = ref(false)
  const message = ref('')

  // Simple key combination - Ctrl+K (Cmd+K on Mac)
  useHotkey('ctrl+k', () => {
    commandPaletteOpen.value = true
  })

  // Key sequence (GitHub-style) - press 'g' then 'h'
  useHotkey('g-h', () => {
    message.value = 'Go home!'
  })

  // With multiple modifiers
  useHotkey('ctrl+shift+s', () => {
    message.value = 'Save all!'
  })

  // Allow in inputs with the inputs option
  useHotkey('escape', () => {
    commandPaletteOpen.value = false
  }, { inputs: true })
</script>

<template>
  <div>
    <p>Press Ctrl+K to open command palette</p>
    <p>Press g then h for GitHub-style navigation</p>
    <p v-if="message">{{ message }}</p>
  </div>
</template>
```

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

### Development and Build Commands

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/CLAUDE.md

Commands to start the development server, build the static site, and preview the build.

```bash
pnpm dev       # Start on port 8000
pnpm build     # SSG build
pnpm preview   # Preview build
```

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

### Theme Color Studio Example

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/composables/plugins/use-theme.md

Demonstrates a full theme explorer using useTheme, including dynamic theme registration, color palette management, and runtime theme switching. Shows how resolved colors are stable strings suitable for direct use.

```typescript
import {
  createThemeContext,
  createTokens,
} from "../create-tokens";

const palette = {
  primary: {
    "50": "#f5f7fa",
    "100": "#eaf0f6",
    "200": "#d5e2ef",
    "300": "#b8cce6",
    "400": "#9bb5d9",
    "500": "#7e9fcc",
    "600": "#6287b3",
    "700": "#476e9a",
    "800": "#2f5581",
    "900": "#1a3d69",
    "A100": "#f5f7fa",
    "A200": "#eaf0f6",
    "A400": "#9bb5d9",
    "A700": "#476e9a",
  },
  secondary: {
    "50": "#f5f7fa",
    "100": "#eaf0f6",
    "200": "#d5e2ef",
    "300": "#b8cce6",
    "400": "#9bb5d9",
    "500": "#7e9fcc",
    "600": "#6287b3",
    "700": "#476e9a",
    "800": "#2f5581",
    "900": "#1a3d69",
    "A100": "#f5f7fa",
    "A200": "#eaf0f6",
    "A400": "#9bb5d9",
    "A700": "#476e9a",
  },
  accent: {
    "50": "#f5f7fa",
    "100": "#eaf0f6",
    "200": "#d5e2ef",
    "300": "#b8cce6",
    "400": "#9bb5d9",
    "500": "#7e9fcc",
    "600": "#6287b3",
    "700": "#476e9a",
    "800": "#2f5581",
    "900": "#1a3d69",
    "A100": "#f5f7fa",
    "A200": "#eaf0f6",
    "A400": "#9bb5d9",
    "A700": "#476e9a",
  },
};

export const { registerTheme, useTheme } = createThemeContext(
  createTokens(palette)
);

registerTheme({
  id: "blue",
  dark: false,
  colors: {
    primary: "primary-500",
    secondary: "secondary-500",
    accent: "accent-500",
  },
});

registerTheme({
  id: "green",
  dark: false,
  colors: {
    primary: "primary-500",
    secondary: "secondary-500",
    accent: "accent-500",
  },
});

registerTheme({
  id: "red",
  dark: false,
  colors: {
    primary: "primary-500",
    secondary: "secondary-500",
    accent: "accent-500",
  },
});

registerTheme({
  id: "purple",
  dark: false,
  colors: {
    primary: "primary-500",
    secondary: "secondary-500",
    accent: "accent-500",
  },
});

```

```vue
<script setup lang="ts">
import {
  useTheme,
  registerTheme,
  createTokens,
} from "./context";
import { computed, ref } from "vue";

const theme = useTheme();

const copied = ref(false);
const copiedTimeout = ref<NodeJS.Timeout | null>(null);

const resolvedColors = computed(() => {
  return theme.colors.value[theme.selectedId.value] ?? {};
});

function copyToClipboard(text: string) {
  navigator.clipboard.writeText(text);
  copied.value = true;
  if (copiedTimeout.value) clearTimeout(copiedTimeout.value);
  copiedTimeout.value = setTimeout(() => (copied.value = false), 2000);
}

function register() {
  const id = "custom-" + Date.now().toString().slice(-4);
  registerTheme({
    id,
    dark: false,
    colors: {
      primary: "primary-500",
      secondary: "secondary-500",
      accent: "accent-500",
    },
  });
  theme.select(id);
}
</script>

<template>
  <VCard>
    <VCardText>
      <div class="d-flex align-center justify-space-between mb-4">
        <div class="text-h6">Color Studio</div>
        <VBtn color="primary" @click="register" prepend-icon="mdi-plus">
          Register Theme
        </VBtn>
      </div>

      <div class="d-flex flex-wrap ga-4">
        <div
          v-for="([key, value]) in Object.entries(resolvedColors)"
          :key="key"
          class="d-flex flex-column align-center"
        >
          <div
            class="pa-4 mb-2 rounded-lg"
            :style="{ backgroundColor: value }"
            @click="copyToClipboard(value)"
          >
            <VIcon
              v-if="copied"
              size="24"
              class="mb-2"
              icon="mdi-check"
            />
          </div>
          <div class="text-caption text-medium-emphasis">
            {{ key }}
          </div>
          <div class="text-caption font-weight-medium">
            {{ value }}
          </div>
        </div>
      </div>
    </VCardText>
  </VCard>
</template>

```

```vue
<script setup lang="ts">
import {
  useTheme,
  registerTheme,
  createTokens,
} from "./context";

const theme = useTheme();

// Example of selecting a theme by id
theme.select("blue");

// Example of cycling through themes
theme.cycle(); // Cycles through all registered themes
theme.cycle(["green", "red"]); // Cycles only through green and red
</script>

<template>
  <VCard>
    <VCardText>
      <div class="text-h6 mb-4">Theme Preview</div>
      <div class="text-body-1 mb-2">
        Current Theme: {{ theme.selectedId.value }}
      </div>
      <div class="text-body-1 mb-2">
        Is Dark: {{ theme.isDark.value }}
      </div>
      <div class="d-flex ga-2">
        <VBtn
          v-for="themeId in Object.keys(theme.colors.value)"
          :key="themeId"
          @click="theme.select(themeId)"
          :variant="
            theme.selectedId.value === themeId ? 'tonal' : 'text'
          "
        >
          {{ themeId }}
        </VBtn>
      </div>
    </VCardText>
  </VCard>
</template>

```

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

### File Tree Explorer Example

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/composables/selection/create-nested.md

An example demonstrating the provider/consumer pattern for a file-tree explorer using createNested with cascading selection. It shows how to set up the tree, manage state, and render the UI.

```typescript
import { createNested } from '@vuetify/use'
import { createContext } from '@vuetify/use'

interface FileMeta {
  label: string
  kind: 'folder' | 'file'
}

interface FileNode {
  id: string
  value: FileMeta
  children?: FileNode[]
}

const { 
  onboard,
  meta,
  stats,
  registration: { toRegistration },
} = createNested<FileNode, FileMeta>({
  selection: 'cascade',
  context: createContext<{
    meta: (id: string) => FileMeta
    stats: { total: number, open: number, selected: number }
  }>(),
})

const source: FileNode[] = [
  {
    id: 'root',
    value: { label: 'Root', kind: 'folder' },
    children: [
      {
        id: 'folder1',
        value: { label: 'Folder 1', kind: 'folder' },
        children: [
          { id: 'file1', value: { label: 'File 1', kind: 'file' } },
          { id: 'file2', value: { label: 'File 2', kind: 'file' } },
        ]
      },
      { id: 'file3', value: { label: 'File 3', kind: 'file' } },
    ]
  }
]

onboard(source.map(toRegistration))

export const fileTree = {
  meta,
  stats,
}
```

```vue
<script setup lang="ts">
import { fileTree } from './context'
import { useTree } from './file-explorer'

const { 
  walk,
  getDepth,
  opened,
  selected,
  mixed,
  toggle,
  expandAll,
  collapseAll,
} = useTree()
</script>

<template>
  <v-card>
    <v-toolbar density="compact">
      <v-btn @click="expandAll()" icon="mdi-folder-open"></v-btn>
      <v-btn @click="collapseAll()" icon="mdi-folder-collapse"></v-btn>
      <v-spacer></v-spacer>
      <v-toolbar-title>{{ fileTree.stats.selected }} / {{ fileTree.stats.total }} selected</v-toolbar-title>
    </v-toolbar>
    <v-list density="compact" lines="1">
      <template v-for="node in walk()" :key="node.id">
        <v-list-item
          v-if="opened(node.id)"
          :style="{ paddingLeft: `${getDepth(node.id) * 20}px` }"
        >
          <template #prepend>
            <v-checkbox-btn
              :model-value="selected(node.id)"
              :indeterminate="mixed(node.id)"
              density="compact"
              @update:model-value="toggle(node.id)"
            ></v-checkbox-btn>
          </template>

          <v-list-item-title>{{ fileTree.meta(node.id).label }}</v-list-item-title>

          <template #append>
            <v-icon v-if="fileTree.meta(node.id).kind === 'folder'" :icon="opened(node.id) ? 'mdi-folder-open' : 'mdi-folder'" />
          </template>
        </v-list-item>
      </template>
    </v-list>
  </v-card>
</template>
```

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

### Install Stack Plugin

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/composables/plugins/use-stack.md

Install the Stack plugin in your app's entry point. This is required for SSR to ensure each request gets its own stack instance.

```typescript
import { createApp } from 'vue'
import { createStackPlugin } from '@vuetify/v0'
import App from './App.vue'

const app = createApp(App)

app.use(createStackPlugin())

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

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

### Install Vuetify0 Theme Plugin

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/guide/features/theming.md

Install the theme plugin and configure default themes with custom colors. This setup is typically done in your application's main entry file.

```typescript
import { createApp } from 'vue'
import { createThemePlugin } from '@vuetify/v0'

const app = createApp(App)

app.use(
  createThemePlugin({
    default: 'light',
    themes: {
      light: {
        dark: false,
        colors: {
          primary: '#1976D2',
          secondary: '#424242',
          background: '#FFFFFF',
          surface: '#FFFFFF',
          error: '#B00020',
        },
      },
      dark: {
        dark: true,
        colors: {
          primary: '#2196F3',
          secondary: '#616161',
          background: '#121212',
          surface: '#1E1E1E',
          error: '#CF6679',
        },
      },
    },
  }),
)

```

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

### Inline Function Rule Example

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/composables/plugins/use-rules.md

This example shows how to use an inline function as a validation rule alongside aliased rules. The inline function provides custom validation logic directly within the `createValidation` setup.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { createValidation } from 'vuetify/rules'
import { useRules } from './context'

const rateLimit = ref('')
const rules = createValidation(() => {
  return [
    useRules().required,
    (v: any) => {
      if (!v) return true
      return /^[0-9]+$/.test(v) || 'Rate limit must be a number'
    },
  ]
})
</script>

<template>
  <VTextField
    v-model="rateLimit"
    :rules="rules()"
  />
</template>
```

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

### Responsive Chips Example

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/guide/features/utilities.md

Demonstrates a responsive chip display using `createOverflow` to manage visibility based on container capacity.

```vue
<template>
  <div ref="container" class="flex gap-2">
    <span v-for="tag in visibleTags" :key="tag" class="chip">
      {{ tag }}
    </span>
    <span v-if="overflow.isOverflowing.value" class="chip">
      +{{ tags.length - overflow.capacity.value }}
    </span>
  </div>
</template>

<script setup>
  const tags = ['Vue', 'React', 'Angular', 'Svelte', 'Solid']
  const visibleTags = computed(() => tags.slice(0, overflow.capacity.value))
</script>
```

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

### Scaffold a New Project with npm

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/guide/integration/devkey.md

Use this command to scaffold a fresh DevKey-shaped project locally with npm.

```bash
npm create vuetify0
```

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

### Basic Two-List Drag and Drop Example

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/composables/system/use-drag-drop.md

This example demonstrates a basic two-list drag and drop scenario. It shows how to pick up an item and drop it into another list, with visual feedback provided during the drag operation. This setup is useful for sortable lists with cross-container moves.

```vue
<script setup>
import { ref } from 'vue'

const items1 = ref([
  { id: 1, text: 'Item 1' },
  { id: 2, text: 'Item 2' },
  { id: 3, text: 'Item 3' },
])
const items2 = ref([
  { id: 4, text: 'Item 4' },
  { id: 5, text: 'Item 5' },
  { id: 6, text: 'Item 6' },
])

function onDrop(event) {
  const { draggedItem, droppedIndex } = event

  // Find the item in its original list
  let originalList = null
  let originalIndex = -1
  if (items1.value.find((item, index) => item.id === draggedItem.id)) {
    originalList = items1.value
    originalIndex = items1.value.findIndex(item => item.id === draggedItem.id)
  } else if (items2.value.find((item, index) => item.id === draggedItem.id)) {
    originalList = items2.value
    originalIndex = items2.value.findIndex(item => item.id === draggedItem.id)
  }

  if (originalList) {
    // Remove from original list
    originalList.splice(originalIndex, 1)

    // Add to the target list at the dropped index
    if (event.targetList === 'items1') {
      items1.value.splice(droppedIndex, 0, draggedItem)
    } else if (event.targetList === 'items2') {
      items2.value.splice(droppedIndex, 0, draggedItem)
    }
  }
}
</script>

<template>
  <v-row>
    <v-col cols="6">
      <v-card>
        <v-card-title>List 1</v-card-title>
        <v-card-text>
          <DropList :items="items1" @drop="onDrop" list-id="items1" />
        </v-card-text>
      </v-card>
    </v-col>
    <v-col cols="6">
      <v-card>
        <v-card-title>List 2</v-card-title>
        <v-card-text>
          <DropList :items="items2" @drop="onDrop" list-id="items2" />
        </v-card-text>
      </v-card>
    </v-col>
  </v-row>
</template>

```

```vue
<script setup>
import { useDragDrop } from '@vuetify/use-drag-drop'
import DragItem from './DragItem.vue'

const props = defineProps({
  items: {
    type: Array,
    required: true,
  },
  listId: {
    type: String,
    required: true,
  }
})

const emit = defineEmits(['drop'])

const { draggables, zones } = useDragDrop()

zones.register({
  el: document.body, // Replace with the actual element
  accept: 'item',
  orientation: 'vertical',
  onDrop: (event) => {
    emit('drop', {
      ...event,
      targetList: props.listId
    })
  },
})
</script>

<template>
  <div class="drop-zone">
    <DragItem
      v-for="(item, index) in items"
      :key="item.id"
      :item="item"
      :index="index"
      :list-id="listId"
    />
  </div>
</template>

<style scoped>
.drop-zone {
  min-height: 100px;
  border: 1px dashed #ccc;
  padding: 10px;
}
</style>

```

```vue
<script setup>
import { useDragDrop } from '@vuetify/use-drag-drop'

const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
  index: {
    type: Number,
    required: true,
  },
  listId: {
    type: String,
    required: true,
  }
})

const { draggables } = useDragDrop()

draggables.register({
  el: document.body, // Replace with the actual element
  type: 'item',
  value: props.item,
  onDragStart: (event) => {
    // You can add custom logic here for when drag starts
    console.log('Drag started for item:', props.item.text)
  },
  onDragEnd: (event) => {
    // You can add custom logic here for when drag ends
    console.log('Drag ended for item:', props.item.text)
  }
})
</script>

<template>
  <div class="drag-item">
    {{ item.text }}
  </div>
</template>

<style scoped>
.drag-item {
  padding: 10px;
  margin-bottom: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  cursor: grab;
}
</style>

```

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

### Coordinated Tooltip Region Setup

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/composables/plugins/use-tooltip.md

Example of setting up a coordinated tooltip region using `RegionProvider` and `createTooltipContext`. This configures shared delay and disabled states for a subtree.

```vue
<script setup lang="ts">
import { provide } from 'vue'
import { createTooltipContext, type TooltipContext } from '@vuetify/use-tooltip'

const tooltipContext = createTooltipContext({
  openDelay: 700,
  closeDelay: 150,
  skipDelay: 300,
  disabled: false,
})

provide('v0:tooltip', tooltipContext)
</script>

<template>
  <slot />
</template>
```

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

### Use useStorage Composable

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/composables/plugins/use-storage.md

Use the useStorage composable in any component after installing the plugin. Get a reactive ref for a storage key and update its value, which automatically persists to storage.

```vue
<script setup lang="ts">
  import { useStorage } from '@vuetify/v0'

  const storage = useStorage()

  // Get a reactive ref for a storage key
  const username = storage.get('username', 'Guest')

  // Update the value (automatically persists to storage)
  function updateUsername(name: string) {
    username.value = name
  }
</script>

<template>
  <div>
    <h1>Welcome, {{ username }}!</h1>
    <input v-model="username" placeholder="Enter your name" />
  </div>
</template>
```

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

### Import Example Component and Raw Code

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/CLAUDE.md

Demonstrates how to import a Vue component and its raw code version using a path alias for use with DocsExample.

```vue
<script setup>
import BasicExample from '@/examples/components/tabs/basic.vue'
import BasicExampleRaw from '@/examples/components/tabs/basic.vue?raw'
</script>
```

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

### Low-level createPlugin API

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/composables/foundation/create-plugin.md

Use `createPlugin` directly for fine-grained control or when composing with existing `createContext` instances. This example shows how to define a custom plugin with namespace, provide, and setup hooks.

```typescript
import { createContext, createPlugin } from '@vuetify/v0'

interface MyPluginContext {
  app: string
}

export const [useMyContext, provideMyContext] = createContext<MyPluginContext>('provide-namespace')

export function createMyPlugin () {
  const context = {
    app: 'my-app'
  }

  return createPlugin({
    namespace: 'provide-namespace',
    provide: (app: App) => {
      provideMyContext(context, app)
    },
    setup: (app: App) => {
      // For everything else not provide related
    }
  })
}
```

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

### Notification Center Example

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/composables/plugins/use-notifications.md

Demonstrates a notification center powered by a single `createNotifications` instance, rendering different notification surfaces based on `data.type`. This setup allows for flexible notification display and interaction.

```vue
<script setup lang="ts">
import { createNotifications } from '@vuetify/use-notifications'
import NotificationProvider from './NotificationProvider.vue'
import NotificationConsumer from './NotificationConsumer.vue'
import Inbox from './inbox.vue'

const {
  notifications,
  send,
  register,
  queue,
  read,
  unread,
  seen,
  archive,
  unarchive,
  snooze,
  wake,
  readAll,
  archiveAll,
  onboard,
  clear,
  dispose,
} = createNotifications()
</script>

<template>
  <v-app>
    <NotificationProvider
      :notifications="notifications"
      :read="read"
      :unread="unread"
      :seen="seen"
      :archive="archive"
      :unarchive="unarchive"
      :snooze="snooze"
      :wake="wake"
      :readAll="readAll"
      :archiveAll="archiveAll"
    />
    <NotificationConsumer :send="send" :register="register" :onboard="onboard" />
    <v-main>
      <v-container>
        <Inbox
          :notifications="notifications"
          :read="read"
          :unread="unread"
          :seen="seen"
          :archive="archive"
          :unarchive="unarchive"
          :snooze="snooze"
          :wake="wake"
          :readAll="readAll"
          :archiveAll="archiveAll"
          :clear="clear"
          :dispose="dispose"
        />
      </v-container>
    </v-main>
  </v-app>
</template>

```

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

### localStorage Theme Persistence Setup

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/guide/features/theming.md

Configure the theme plugin to use localStorage for persisting user theme preferences. This involves installing the storage plugin first and then reading the stored value to set the initial theme.

```typescript
import { createApp } from 'vue'
import {
  createStoragePlugin,
  createThemePlugin,
  useStorage,
  IN_BROWSER,
} from '@vuetify/v0'

const app = createApp(App)

// Install storage plugin first
app.use(createStoragePlugin())

// Helper to resolve system preference
function getSystemTheme(): 'light' | 'dark' {
  if (!IN_BROWSER) return 'light'
  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}

// Read stored preference using app context
const storedTheme = app.runWithContext(() => useStorage().get<string>('theme'))
const initialTheme = storedTheme.value === 'dark' ? 'dark' : storedTheme.value === 'light' ? 'light' : getSystemTheme()

app.use(
  createThemePlugin({
    default: initialTheme,
    themes: {
      light: { dark: false, colors: { /* ... */ } },
      dark: { dark: true, colors: { /* ... */ } },
    },
  }),
)
```

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

### Scaffold a New Project with bun

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/guide/integration/devkey.md

Use this command to scaffold a fresh DevKey-shaped project locally with bun.

```bash
bun create vuetify0
```

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

### Create a filter with a custom filter function

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/composables/data/create-filter.md

Use `createFilter` with the `customFilter` option to bypass built-in logic and provide your own filtering predicate. This example filters based on whether the item's name starts with the query.

```typescript
// Custom filter (overrides keys and mode)
const filter = createFilter({
  customFilter: (query, item) =>
    String(item.name).toLowerCase().startsWith(String(query).toLowerCase()),
})
```

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

### Fallback Hydration without Plugin

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/composables/plugins/use-hydration.md

When `useHydration()` is called without the plugin installed, it returns a fallback context where `isHydrated` and `isSettled` are immediately `true`. This ensures components work correctly in client-only apps without plugin setup.

```typescript
// Without plugin: isHydrated.value === true immediately
// With plugin:    isHydrated.value starts false, becomes true after mount
const { isHydrated } = useHydration()

```

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

### createOtp Usage Example

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/composables/forms/create-otp.md

Demonstrates how to initialize and use the createOtp composable. It shows setting length, pattern, an onComplete callback, and various methods for writing, distributing, and checking the OTP state. The onComplete callback can return false to clear the value and surface an error.

```typescript
import { createOtp } from '@vuetify/v0'

const otp = createOtp({
  length: 6,
  pattern: 'numeric',
  onComplete: async value => {
    const ok = await verify(value)
    return ok // false clears the value and surfaces an error
  },
})

otp.write(0, '4')          // single character at a position
otp.distribute('123456')   // distributes filtered characters
otp.value.value            // '412345' joined string
otp.isComplete.value       // true when length reached and all chars valid
otp.accepts('a')           // false under 'numeric'
otp.clear()
```

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

### Countdown Timer Example

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/composables/system/use-timer.md

Demonstrates a 10-second countdown timer with start, stop, pause, and resume controls. It displays the remaining time and active status, suitable for user-facing delays like OTP expiry or resend-code cooldowns.

```vue
<script setup lang="ts">
import { toRef } from 'vue'
import { useTimer } from '@vuetify/use-timer'

const duration = 10000
const timer = useTimer(duration)

const remainingSeconds = toRef(() => Math.ceil(timer.remaining.value / 1000))
const progressWidth = toRef(() => (timer.remaining.value / duration) * 100)
</script>

<template>
  <VCard>
    <VCardText>
      <div class="text-h4 mb-2">
        {{ remainingSeconds }}s
      </div>
      <VProgressLinear
        :model-value="progressWidth"
        color="primary"
        height="6"
        striped
      />
    </VCard-Text>
    <VCardActions>
      <VBtn
        :disabled="timer.isActive.value"
        @click="timer.start()"
      >
        Start
      </VBtn>
      <VBtn
        :disabled="!timer.isActive.value || timer.isPaused.value"
        @click="timer.pause()"
      >
        Pause
      </VBtn>
      <VBtn
        :disabled="!timer.isActive.value || !timer.isPaused.value"
        @click="timer.resume()"
      >
        Resume
      </VBtn>
      <VBtn
        :disabled="!timer.isActive.value"
        @click="timer.stop()"
      >
        Stop
      </VBtn>
    </VCardActions>
    <VCardText>
      <VChipGroup>
        <VChip>Active: {{ timer.isActive.value }}</VChip>
        <VChip>Paused: {{ timer.isPaused.value }}</VChip>
        <VChip>Remaining: {{ timer.remaining.value }}ms</VChip>
      </VChipGroup>
    </VCardText>
  </VCard>
</template>

```

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

### Initialize Vuetify0 Project with Vuetify CLI (bun)

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/introduction/getting-started.md

Use the Vuetify CLI with bun to initialize a Vuetify0 project, offering more configuration options.

```bash
bunx @vuetify/cli init --type vuetify0
```

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

### CSS Theme Inheritance Example

Source: https://github.com/vuetifyjs/0/blob/master/packages/genesis/SPEC.md

Demonstrates how Genesis components reference v0 theme tokens with fallback values. This allows components to inherit the active theme when v0's plugin is installed or maintain a reasonable appearance in v0-less applications.

```css
.genesis-docs-example {
  background: var(--v0-surface, #fff);
  color: var(--v0-on-surface, #1a1c1e);
  border: 1px solid color-mix(in srgb, var(--v0-on-surface, currentcolor) 14%, transparent);
}

```

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

### Create Vuetify Project with Bun

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/guide/tooling/vuetify-cli.md

Use this command to create a new Vuetify project with Bun, specifying platform, CSS framework, router, and features. The `--install` flag automatically installs dependencies.

```bash
bun create vuetify0 my-app \
  --platform=vue \
  --css=unocss \
  --router=router \
  --features=eslint,pinia \
  --install
```

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

### Image Gallery with Navigation and Autoplay

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/components/semantic/carousel.md

An example of an image gallery using the Carousel component, featuring a peek viewport, overlay navigation, autoplay with a pause toggle, a timer bar, and a caption panel that reflects the selected slide. This setup is ideal for marketing heroes, onboarding flows, and product galleries.

```typescript
import { ref, computed } from 'vue'
import type { Ref } from 'vue'

export const useGallery = () => {
  const photos = [
    { src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg', alt: 'A squirrel' },
    { src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg', alt: 'A cloudy sky' },
    { src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg', alt: 'A bird' },
    { src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg', alt: 'A planet' },
  ]

  const active = ref(0)
  const autoplay = ref(2000)
  const progress = ref(0)
  const playing = ref(true)

  const activePhoto = computed(() => photos[active.value])

  return {
    photos,
    active,
    autoplay,
    progress,
    playing,
    activePhoto,
  }
}
```

```vue
<script setup lang="ts">
  import { Carousel } from '@vuetify/v0'
  import { useGallery } from './useGallery'

  const { photos, active, autoplay, progress, playing, activePhoto } = useGallery()
</script>

<template>
  <Carousel.Root
    v-model="active"
    :autoplay="autoplay"
    circular
    :model-value="active"
    @update:model-value="active = $event"
  >
    <Carousel.Viewport class="h-[400px]">
      <Carousel.Item
        v-for="(photo, i) in photos"
        :key="i"
        :value="i"
        class="snap-start w-full"
      >
        <img
          :src="photo.src"
          :alt="photo.alt"
          class="w-full h-full object-cover"
        />
      </Carousel.Item>
    </Carousel.Viewport>

    <div class="absolute inset-x-0 bottom-4 z-10 flex justify-center gap-2">
      <Carousel.Indicator
        v-for="(_, i) in photos"
        :key="i"
        :index="i"
        class="size-3 rounded-full bg-white/50 data-[state=active]:bg-white"
      />
    </div>

    <Carousel.Previous
      class="absolute left-4 top-1/2 -translate-y-1/2 z-10 opacity-50 transition-opacity hover:opacity-100"
    >
      <div class="i-mdi-chevron-left text-4xl text-white" />
    </Carousel.Previous>
    <Carousel.Next
      class="absolute right-4 top-1/2 -translate-y-1/2 z-10 opacity-50 transition-opacity hover:opacity-100"
    >
      <div class="i-mdi-chevron-right text-4xl text-white" />
    </Carousel.Next>

    <Carousel.Progress
      v-if="autoplay"
      :value="progress"
      class="absolute bottom-0 left-0 right-0 h-1 bg-white/50 data-[state=idle]:opacity-0"
    />

    <Carousel.LiveRegion />
  </Carousel.Root>
</template>

```

```vue
<script setup lang="ts">
  import { Carousel } from '@vuetify/v0'
  import Gallery from './Gallery.vue'
  import { useGallery } from './useGallery'

  const { activePhoto } = useGallery()
</script>

<template>
  <Gallery />
  <div class="mt-4 text-center">
    <p v-if="activePhoto">{{ activePhoto.alt }}</p>
  </div>
</template>

```

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

### Install Vuetify Built-in Plugins

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/guide/fundamentals/plugins.md

Basic installation of theme and locale plugins. Ensure these are installed before mounting the app.

```ts
import { createApp } from 'vue'
import { createThemePlugin, createLocalePlugin } from '@vuetify/v0'

const app = createApp(App)

// Install plugins
app.use(createThemePlugin())
app.use(createLocalePlugin())

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

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

### Project File Structure Overview

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/guide/integration/building-docs.md

An overview of the project's directory structure, highlighting key directories like 'build', 'src', and configuration files.

```text
apps/docs/
├── build/                 # Build-time plugins
│   ├── generate-api.ts    # API extraction
│   ├── generate-nav.ts    # Navigation tree
│   └── markdown.ts        # Shiki + callouts
├── src/
│   ├── components/
│   │   ├── app/           # Shell (AppNav, AppBar)
│   │   ├── docs/          # Doc UI (DocsExample, DocsApi)
│   │   └── home/          # Homepage sections
│   ├── composables/       # App-specific composables
│   ├── examples/          # Live code examples
│   ├── layouts/           # Page layouts
│   ├── pages/             # File-based routes
│   └── stores/            # Pinia stores
├── uno.config.ts          # UnoCSS configuration
└── vite.config.ts         # Build pipeline
```

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

### createRegistry Usage Example

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/composables/registration/create-registry.md

Demonstrates registering, looking up, updating, moving, and removing items from a registry. Also shows bulk operations like onboarding and offboarding.

```typescript
import { createRegistry } from '@vuetify/v0'
import type { RegistryTicket } from '@vuetify/v0'

interface Item extends RegistryTicket<string> {
  label: string
}

const registry = createRegistry<Item>()

// Register individual items
const a = registry.register({ label: 'Alpha' })
const b = registry.register({ label: 'Beta' })
const c = registry.register({ label: 'Gamma' })

console.log(registry.size) // 3
console.log(a.index)       // 0

// Look up by id
const found = registry.get(b.id)
console.log(found?.label)  // 'Beta'

// Patch a field without replacing the ticket
registry.upsert(b.id, { label: 'Beta (updated)' })

// Move to a new position
registry.move(a.id, 2)
console.log(a.index)       // 2

// Remove one
registry.unregister(c.id)
console.log(registry.size) // 2

// Bulk load
registry.onboard([
  { id: 'x', label: 'X' },
  { id: 'y', label: 'Y' },
])

// Bulk remove
registry.offboard(['x', 'y'])
```

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

### Install Vuetify v0

Source: https://github.com/vuetifyjs/0/blob/master/README.md

Install the Vuetify v0 package using npm, pnpm, yarn, or bun. Ensure Node.js and pnpm are installed.

```bash
npm install @vuetify/v0@latest
# or
pnpm add @vuetify/v0
# or
yarn add @vuetify/v0
# or
bun add @vuetify/v0
```

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

### Install Reduced Motion Plugin

Source: https://github.com/vuetifyjs/0/blob/master/apps/docs/src/pages/composables/plugins/use-reduced-motion.md

Install the reduced-motion plugin in your app's entry point. Ensure the head plugin is installed before this for server-side rendering.

```ts
import { createApp } from 'vue'
import { createReducedMotionPlugin } from '@vuetify/v0'
import App from './App.vue'

const app = createApp(App)

app.use(createReducedMotionPlugin({ mode: 'system' }))

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