Migración a la V4

Nuxt UI v4 marca un hito importante: **Nuxt UI y Nuxt UI Pro ahora están unificados en una única biblioteca de código abierto y gratuita **. Ahora tiene acceso a más de 125 componentes listos para producción, todos disponibles en el paquete @nuxt/ui.

Esta guía proporciona instrucciones paso a paso para migrar su aplicación de la v3 a la v4.

Migrar su proyecto

Desde Nuxt UI Pro

1. Reemplazar @nuxt/ui-pro con @nuxt/ui en su package.json:

pnpm remove @nuxt/ui-pro
pnpm add @nuxt/ui tailwindcss

yarn remove @nuxt/ui-pro
yarn add @nuxt/ui tailwindcss

npm uninstall @nuxt/ui-pro
npm install @nuxt/ui tailwindcss

bun remove @nuxt/ui-pro
bun add @nuxt/ui tailwindcss

4. Reemplazar @nuxt/ui-pro con @nuxt/ui en su CSS:

5. Reemplazar @nuxt/ui-pro con @nuxt/ui en sus importaciones:

- import type { BannerProps } from '@nuxt/ui-pro'
+ import type { BannerProps } from '@nuxt/ui'

Desde Nuxt UI

1. Al actualizar desde Nuxt UI v3, simplemente necesita actualizar a v4:

pnpm add @nuxt/ui tailwindcss

yarn add @nuxt/ui tailwindcss

npm install @nuxt/ui tailwindcss

bun add @nuxt/ui tailwindcss

Cambios desde la v3

Después de actualizar a Nuxt UI v4, tenga en cuenta los siguientes cambios importantes:

Renombrado ButtonGroup

El componente ButtonGroup ha sido renombrado a FieldGroup:

<template>
- <UButtonGroup>
+ <UFieldGroup>
    <UButton label="Button" />
    <UButton icon="i-lucide-chevron-down" />
+ </UFieldGroup>
- </UButtonGroup>
</template>

Renombrado PageMarquee

El componente PageMarquee ha sido renombrado a Marquee:

<template>
- <UPageMarquee :items="items" />
+ <UMarquee :items="items" />
</template>

PageRemoved Acordeón

El componente PageAccordion ha sido eliminado a favor de Accordion:

<template>
- <UPageAccordion
+ <UAccordion
    :items="items"
+   :unmount-on-hide="false"
+   :ui="{ trigger: 'text-base', body: 'text-base text-muted' }"
  />
</template>

Modificadores del modelo renombrados

La forma modelModifiers utilizada por [Input/docs/components/inputPH2223 @, y ha cambiado en la v4:

1. El modificador nullify fue renombrado a nullable(convierte los valores vacíos/en blanco a null).
2. Se ha añadido un nuevo modificador optional(convierte valores vacíos/en blanco a undefined).

- <UInput v-model.nullify="value" />
+ <UInput v-model.nullable="value" />

- <UTextarea v-model="value" :model-modifiers="{ nullify: true }" />
+ <UTextarea v-model="value" :model-modifiers="{ nullable: true }" />

Utilice nullable cuando desee valores vacíos como null, y optional cuando prefiera undefined para valores ausentes.

Cambios en el componente de formulario

El componente Form ha sido mejorado en la v4 con una mejor gestión de estado y manejo de formularios anidados.

1. Esquema **transformaciones sólo se aplicará a la @submit data y ya no mutar el estado de la forma.
2. **Las formas anidadas deben habilitarse explícitamente ** utilizando la prop.nested. Esto hace que el comportamiento del componente sea más explícito y evita la creación accidental de formas anidadas.
3. Anidados formularios ahora debe proporcionar un name prop (similar a UFormField) y automáticamente heredará su estado de su padre formulario.

<template>
  <UForm :state="state" :schema="schema" @submit="onSubmit">
    <UFormField label="Customer" name="customer">
      <UInput v-model="state.customer" placeholder="Wonka Industries" />
    </UFormField>

    <div v-for="(item, index) in state.items" :key="index">
      <UForm
-       :state="item"
+       :name="`items.${index}`"
        :schema="itemSchema"
+       nested
      >
        <UFormField :label="!index ? 'Description' : undefined" name="description">
          <UInput v-model="item.description" />
        </UFormField>
        <UFormField :label="!index ? 'Price' : undefined" name="price">
          <UInput v-model="item.price" type="number" />
        </UFormField>
      </UForm>
    </div>
  </UForm>
</template>

Removed utilidades obsoletas

Algunas utilidades de contenido de **Nuxt que estaban disponibles anteriormente en Nuxt UI Pro han sido removed en v4:

@298 @@@ 299 @@pH301 @

Estos son ahora totalmente proporcionados por Nuxt Content. Asegúrese de actualizar sus importaciones y uso en consecuencia.

- import { findPageHeadline } from '@nuxt/ui-pro/utils/content'
+ import { findPageHeadline } from '@nuxt/content/utils'

- import { findPageBreadcrumb } from '@nuxt/ui-pro/utils/content'
+ import { findPageBreadcrumb } from '@nuxt/content/utils'

AI migración SDK (opcional)

Esta sección solo se aplica si está utilizando el SDK de IA y los componentes de chat (ChatMessage,ChatMessages,ChatPrompt,ChatPromptSubmit,ChatPalette). Si no está utilizando las funciones de IA, puede omitir esta sección.

1. Update @ai-sdk/vue y ai dependencias en su package.json y añadir Comark(sustituye @nuxtjs/mdc para la representación de las respuestas de AI como streaming Markdown):

2. La API componible useChat cambió:input y handleSubmit se eliminaron a favor de sendMessage, y messages ahora es una referencia que establece directamente:

<script setup lang="ts">
  import { useChat } from '@ai-sdk/vue'

- const { messages, input, handleSubmit, status, error, reload, setMessages } = useChat()
+ const { messages, status, error, sendMessage, regenerate, stop } = useChat()
+ const input = ref('')
+
+ function handleSubmit() {
+   sendMessage({ text: input.value })
+   input.value = ''
+ }
</script>

3. Mensajes ahora usan parts en lugar de content:

// When manually creating messages
- setMessages([{
+ messages.value = [{
  id: '1',
  role: 'user',
- content: 'Hello world'
+ parts: [{ type: 'text', text: 'Hello world' }]
- }])
+ }]

// In templates
<template>
- <UChatMessage :content="message.content" />
+ <UChatMessage :parts="message.parts" />
</template>

4. Algunos métodos han sido renombrados:

// Regenerate the last message
- reload()
+ regenerate()

5. Reemplazar <MDC> con <Markdown> para renderizado basado en partes. El componente Markdown está especialmente diseñado para transmitir Markdown, renderiza de forma incremental los tokens a medida que llegan desde la IA. Utilice los ayudantes del SDK de IA y la utilidad isPartStreaming de @nuxt/ui/utils/ai.

html.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}