Migrating to v3

const modal = useModal()
modal.open(MyComponent)

const modal = useOverlay(MyComponent)
await modal.open({ props })

<UModal :prevent-close="true" />

<UModal :dismissible="false" />

const schema = yup.object({
  name: yup.string().required()
})

import { z } from 'zod'

const schema = z.object({
  name: z.string().min(1)
})

npm install @compodium/vue-devtools

<UToast @click="handleClick" />

const toast = useToast()
toast.add({
  title: 'Hello',
  onClick: () => handleClick()
})

await toast.add({ title: 'Success' })

toast.add({ 
  title: 'Success',
  onClose: () => console.log('Closed')
})

<UTable 
  v-model="selected"
  :data="items" 
  @select="(selected, item) => handleSelect(selected, item)"
/>

export default defineAppConfig({
  ui: {
    button: {
      base: 'font-medium rounded',
      variants: {
        color: {
          primary: 'bg-primary text-white',
          secondary: 'bg-gray-200 text-gray-900'
        }
      }
    }
  }
})

<div class="bg-gray-100 text-gray-900" />

<div class="bg-elevated text-default" />

<UAlert orientation="horizontal" />
<UToast orientation="vertical" />

<template>
  <UTree :items="treeData" />
</template>

<script setup>
const treeData = [
  {
    label: 'Parent',
    children: [
      { label: 'Child 1' },
      { label: 'Child 2' }
    ]
  }
]
</script>

<template>
  <UInputNumber 
    v-model="value" 
    :min="0" 
    :max="100" 
    :step="5" 
  />
</template>

<template>
  <UPinInput v-model="pin" :length="6" />
</template>

<template>
  <UCalendar v-model="date" />
</template>

<template>
  <UColorPicker v-model="color" />
</template>

<template>
  <UStepper v-model="currentStep" :items="steps" />
</template>

<template>
  <UTimeline :items="events" />
</template>

<template>
  <UCheckboxGroup 
    v-model="selected" 
    :items="options" 
  />
</template>

<template>
  <UInputTags v-model="tags" />
</template>

<template>
  <UFileUpload 
    v-model="files" 
    accept="image/*" 
    multiple 
  />
</template>

import { defineLocale } from '@nuxt/ui'

export default defineNuxtConfig({
  ui: {
    locale: defineLocale('es')
  }
})

import { extendLocale } from '@nuxt/ui'

const customLocale = extendLocale('en', {
  button: {
    submit: 'Send'
  }
})