Migration auf v4

Nuxt UI v4 markiert einen wichtigen Meilenstein: **Nuxt UI und Nuxt UI Pro sind jetzt in einer einzigen, vollständig quelloffenen und kostenlosen Bibliothek vereint **.

Dieses Handbuch enthält eine Schritt-für-Schritt-Anleitung zum Migrieren Ihrer Anwendung von v3 nach v4.

Migrate Ihr Projekt

Von Nuxt UI Pro

1. @nuxt/ui-pro mit @nuxt/ui in Ihrem 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. @nuxt/ui-pro mit @nuxt/ui in Ihrem CSS ersetzen:

5. @nuxt/ui-pro mit @nuxt/ui in Ihren Importen ersetzen:

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

Von Nuxt UI

1. Beim Upgrade von Nuxt UI v3 müssen Sie einfach auf v4 aktualisieren:

pnpm add @nuxt/ui tailwindcss

yarn add @nuxt/ui tailwindcss

npm install @nuxt/ui tailwindcss

bun add @nuxt/ui tailwindcss

Änderungen von v3

Nach dem Upgrade auf Nuxt UI v4, beachten Sie bitte die folgenden wichtigen Änderungen:

Umbenannter ButtonGroup

ButtonGroup Komponente wurde umbenannt in FieldGroup:

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

Umbenanntes PageMarquee

Die PageMarquee Komponente wurde umbenannt in Marquee:

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

Entfernte SeitenAkkordeon

Die PageAccordion Komponente wurde zugunsten von Accordion:

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

Umbenannte Modellmodifikatoren.

modelModifiers Form, die von [InputPH2222),InputNumber und [Textarea/docs/components/textarea)nullableverwendet wird:

1. Der Modifikator nullify wurde in nullable umbenannt (er konvertiert leere/leere Werte in null).
2. Ein neuer optional Modifikator wurde hinzugefügt (er wandelt leere/leere Werte in undefined um).

- <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 }" />

Verwenden Sie nullable, wenn Sie leere Werte als null und optional, wenn Sie undefined für fehlende Werte bevorzugen.

Änderungen an Formularkomponenten

Die Form-Komponente wurde in v4 mit besserer Zustandsverwaltung und verschachtelten Formularhandling verbessert.

1. Schema**transformationen werden nur ** auf die @submit data angewendet und mutieren den Zustand des Formulars nicht mehr.
2. **geschachtelte Formulare müssen explizit ** aktiviert werden, indem die nested prop.
3. Geschachtelte Formulare sollten nun eine name prop (ähnlich wie UFormField) bereitstellen und werden automatisch ihren Status von ihrem übergeordneten Formular erben.

<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>

Entfernt veraltete Dienstprogramme

Einige **Nuxt-Inhaltsverwendungen **, die zuvor in Nuxt UI Pro verfügbar waren, wurden in v4 unter removed übertragen:

findPageBreadcrumbfindPageHeadline

Diese werden jetzt vollständig von Nuxt Content bereitgestellt. Stellen Sie sicher, dass Sie Ihre Importe und die Verwendung entsprechend aktualisieren.

- 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 SDK-Migration (optional)

Dieser Abschnitt gilt nur, wenn Sie das AI SDK und die Chat-Komponenten verwenden (ChatMessage,ChatMessages,ChatPrompt,ChatPromptSubmit,ChatPalette).

1. Update @ai-sdk/vue und ai Abhängigkeiten in Ihrem package.json und fügen Sie Comark(ersetzt @nuxtjs/mdc für das Rendern von AI-Antworten als Streaming-Markdown):

2. Die useChat composable API wurde geändert:input und handleSubmit wurden zugunsten von sendMessage entfernt, und messages ist jetzt eine Referenz, die Sie direkt festlegen:

<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. Nachrichten verwenden jetzt parts anstelle von 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. Einige Methoden wurden umbenannt:

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

5. <MDC> mit <Markdown> für teilbasiertes Rendering. Die Markdown Komponente ist speziell für das Streaming von Markdown entwickelt worden, sie rendert inkrementell Token, wenn sie von den AI. Use AI SDK-Helfern und dem isPartStreaming Utility von @nuxt/ui/utils/ai kommen.

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;
}