From 9ae74a187650f14251ed4c06d775361d95edc4d0 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Fri, 21 Aug 2026 15:33:46 +0200 Subject: [PATCH 1/6] docs: fix dead links, stale claims and wording across docs/content --- docs/content/blog/how-to-build-an-ai-chat.md | 16 ++--- docs/content/community.yml | 2 +- .../content/docs/1.getting-started/1.index.md | 20 +++++- .../2.installation/1.nuxt.md | 6 +- .../1.getting-started/2.installation/2.vue.md | 63 +++++++++++++++++-- .../1.getting-started/3.migration/1.v4.md | 4 +- .../1.getting-started/3.migration/2.v3.md | 6 +- .../docs/1.getting-started/4.contribution.md | 39 ++++++------ .../5.theme/1.design-system.md | 2 +- .../5.theme/2.css-variables.md | 10 +-- .../1.getting-started/5.theme/3.components.md | 49 ++++++++++----- .../6.integrations/1.icons/2.vue.md | 2 + .../6.integrations/3.color-mode/1.nuxt.md | 2 +- .../6.integrations/3.color-mode/2.vue.md | 7 ++- .../6.integrations/4.i18n/1.nuxt.md | 2 +- .../6.integrations/4.i18n/2.vue.md | 4 +- .../6.integrations/5.content.md | 16 +++-- .../docs/1.getting-started/7.ai/1.mcp.md | 6 +- .../docs/1.getting-started/7.ai/2.llms-txt.md | 2 +- docs/content/docs/2.components/0.index.md | 14 ++++- docs/content/docs/2.components/alert.md | 4 +- docs/content/docs/2.components/app.md | 3 +- .../content/docs/2.components/avatar-group.md | 4 ++ docs/content/docs/2.components/banner.md | 3 +- docs/content/docs/2.components/button.md | 4 ++ docs/content/docs/2.components/calendar.md | 7 ++- docs/content/docs/2.components/card.md | 4 ++ docs/content/docs/2.components/carousel.md | 20 +++--- .../docs/2.components/changelog-version.md | 8 +-- .../docs/2.components/changelog-versions.md | 2 +- .../content/docs/2.components/chat-message.md | 2 +- .../docs/2.components/chat-messages.md | 4 +- docs/content/docs/2.components/chat.md | 5 +- .../docs/2.components/checkbox-group.md | 6 +- docs/content/docs/2.components/checkbox.md | 4 ++ docs/content/docs/2.components/collapsible.md | 2 +- .../docs/2.components/color-mode-select.md | 2 +- .../docs/2.components/color-mode-switch.md | 2 +- .../content/docs/2.components/color-picker.md | 4 ++ .../docs/2.components/command-palette.md | 2 +- docs/content/docs/2.components/container.md | 2 +- .../docs/2.components/content-navigation.md | 2 + .../docs/2.components/content-search.md | 2 +- .../docs/2.components/content-surround.md | 8 +-- .../docs/2.components/dashboard-panel.md | 2 +- .../docs/2.components/dashboard-search.md | 2 +- .../docs/2.components/dashboard-sidebar.md | 2 +- docs/content/docs/2.components/drawer.md | 4 +- .../docs/2.components/dropdown-menu.md | 4 ++ .../docs/2.components/editor-toolbar.md | 2 +- docs/content/docs/2.components/editor.md | 3 +- docs/content/docs/2.components/empty.md | 3 +- docs/content/docs/2.components/error.md | 1 - docs/content/docs/2.components/file-upload.md | 2 +- .../docs/2.components/footer-columns.md | 4 ++ docs/content/docs/2.components/footer.md | 3 +- docs/content/docs/2.components/form-field.md | 2 +- docs/content/docs/2.components/form.md | 4 ++ docs/content/docs/2.components/header.md | 3 +- docs/content/docs/2.components/icon.md | 9 ++- docs/content/docs/2.components/input-time.md | 4 ++ docs/content/docs/2.components/input.md | 2 +- docs/content/docs/2.components/kbd.md | 1 - docs/content/docs/2.components/link.md | 6 +- docs/content/docs/2.components/listbox.md | 6 +- docs/content/docs/2.components/main.md | 1 - docs/content/docs/2.components/marquee.md | 5 +- docs/content/docs/2.components/modal.md | 4 +- docs/content/docs/2.components/page-card.md | 4 +- docs/content/docs/2.components/page-links.md | 6 +- docs/content/docs/2.components/page-logos.md | 2 +- docs/content/docs/2.components/pagination.md | 2 +- .../docs/2.components/pricing-table.md | 14 ++--- docs/content/docs/2.components/radio-group.md | 4 ++ docs/content/docs/2.components/scroll-area.md | 4 ++ docs/content/docs/2.components/select.md | 4 ++ docs/content/docs/2.components/sidebar.md | 1 - docs/content/docs/2.components/slideover.md | 4 +- docs/content/docs/2.components/table.md | 6 +- docs/content/docs/2.components/tabs.md | 6 +- docs/content/docs/2.components/theme.md | 2 +- docs/content/docs/2.components/timeline.md | 1 - docs/content/docs/2.components/toast.md | 4 +- docs/content/docs/2.components/user.md | 7 ++- .../docs/3.composables/define-locale.md | 16 +++-- .../docs/3.composables/define-shortcuts.md | 59 ++++++++++------- .../docs/3.composables/extend-locale.md | 16 +++-- .../docs/3.composables/extract-shortcuts.md | 4 +- .../content/docs/3.composables/use-overlay.md | 10 +-- docs/content/docs/3.composables/use-toast.md | 30 +++++---- docs/content/docs/4.typography/1.index.md | 10 +-- .../docs/4.typography/2.headers-and-text.md | 2 +- docs/content/docs/4.typography/5.code.md | 4 +- docs/content/docs/4.typography/badge.md | 4 ++ docs/content/docs/4.typography/card-group.md | 4 ++ docs/content/docs/4.typography/field-group.md | 16 ++--- docs/content/docs/4.typography/kbd.md | 4 ++ docs/content/docs/4.typography/prompt.md | 2 +- docs/content/figma.yml | 1 - docs/content/index.yml | 14 ++--- src/runtime/components/Carousel.vue | 12 ++-- 101 files changed, 489 insertions(+), 247 deletions(-) diff --git a/docs/content/blog/how-to-build-an-ai-chat.md b/docs/content/blog/how-to-build-an-ai-chat.md index 4336916f10..718030b017 100644 --- a/docs/content/blog/how-to-build-an-ai-chat.md +++ b/docs/content/blog/how-to-build-an-ai-chat.md @@ -36,7 +36,7 @@ Check out the [`Nuxt`](https://github.com/nuxt-ui-templates/chat) and [`Vue`](ht Before we start, make sure you have: -- Node.js 20+ installed +- Node.js 20.19+ or 22.12+ installed - A [Vercel AI Gateway](https://vercel.com/docs/ai-gateway) API key (provides access to multiple AI providers through a single endpoint) ## Project setup @@ -191,7 +191,7 @@ This section covers integrating AI on the server. The following API endpoints ha ### Creating a chat -First, create the endpoint that initializes a new chat and saves the first message to the database. This uses the [`UIMessage`](https://ai-sdk.dev/docs/reference/ai-sdk-ui/ui-message) type from the AI SDK: +First, create the endpoint that initializes a new chat and saves the first message to the database. This uses the [`UIMessage`](https://ai-sdk.dev/docs/reference/ai-sdk-core/ui-message) type from the AI SDK: ::code-tree-intersection ```ts [server/api/chats.post.ts] @@ -404,7 +404,7 @@ export default defineEventHandler(async (event) => { ``` :: -## Wire up the UI +## Wiring up the UI Nuxt UI provides purpose-built components for AI chat interfaces: [`UChatPrompt`](/docs/components/chat-prompt) for the input area and [`UChatMessages`](/docs/components/chat-messages) for displaying the conversation. @@ -509,7 +509,7 @@ html.dark .shiki span { ## Creating the chat page -The chat page is where the actual conversation happens. It integrates the AI SDK's [`Chat`](https://ai-sdk.dev/docs/reference/ai-sdk-ui/chat) class and [`DefaultChatTransport`](https://ai-sdk.dev/docs/reference/ai-sdk-ui/default-chat-transport) for real-time streaming. +The chat page is where the actual conversation happens. It integrates the AI SDK's [`Chat`](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat) class and [`DefaultChatTransport`](https://ai-sdk.dev/docs/ai-sdk-ui/transport#default-transport) for real-time streaming. ::code-tree-intersection :::code-collapse @@ -641,7 +641,7 @@ The [`useChat`](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat) composable - Stopping generation with `stop()` - Regenerating responses with `regenerate()` -The `onData` callback receives [custom data events](https://ai-sdk.dev/docs/ai-sdk-ui/streaming-data) from the server (like `data-chat-title`), allowing you to react to server-side events during streaming. +The `onData` callback receives [custom data events](https://ai-sdk.dev/docs/ai-sdk-ui/streaming-data) from the server (like `data-chat-title`), so you can react to server-side events during streaming. **UChatMessages Component** @@ -1141,7 +1141,9 @@ Then, in the Vercel dashboard: - Enable **AI Gateway** and add credits so requests can be processed. - Add a **Turso** database from the Vercel Marketplace and connect it to your project (it will provision the database and add the required environment variables automatically). -> Note: On Vercel, you **don’t need to manually add `AI_GATEWAY_API_KEY`** — Vercel handles the gateway configuration for deployments. Keep using `.env` locally for development. +::note +On Vercel you don't need to manually add `AI_GATEWAY_API_KEY`. Vercel handles the gateway configuration for deployments. Keep using `.env` locally for development. +:: ::note{to="https://vercel.com/docs/ai-gateway" target="_blank"} Learn more about setting up AI Gateway in the **Vercel AI Gateway documentation**. @@ -1161,7 +1163,7 @@ The combination of Nuxt's full-stack capabilities, Nuxt UI's purpose-built chat **Resources:** -- [Nuxt UI Chat Components](https://ui.nuxt.com/components/chat) +- [Nuxt UI Chat Components](https://ui.nuxt.com/docs/components/chat) - [NuxtHub Database](https://hub.nuxt.com/docs/features/database) - [AI SDK Documentation](https://ai-sdk.dev) - [AI Gateway Documentation](https://vercel.com/docs/ai-gateway) diff --git a/docs/content/community.yml b/docs/content/community.yml index 991553eb63..d739f9440f 100644 --- a/docs/content/community.yml +++ b/docs/content/community.yml @@ -26,7 +26,7 @@ items: to: 'https://www.raycast.com/HugoRCD/nuxt' target: '_blank' user: - name: 'HugoRDC' + name: 'HugoRCD' to: 'https://github.com/HugoRCD' target: '_blank' avatar: diff --git a/docs/content/docs/1.getting-started/1.index.md b/docs/content/docs/1.getting-started/1.index.md index 9d930d4c95..c7a5cb1238 100644 --- a/docs/content/docs/1.getting-started/1.index.md +++ b/docs/content/docs/1.getting-started/1.index.md @@ -58,6 +58,8 @@ If you are migrating from v2, you can read more in this **migration guide**. ## Core technologies +Nuxt UI is built on three foundations: Reka UI for behavior and accessibility, Tailwind CSS for styling, and Tailwind Variants for composing variants. + ### Reka UI Nuxt UI is built on top of [Reka UI](https://reka-ui.com/) as a foundation for the components: @@ -90,11 +92,23 @@ Nuxt UI takes advantage of [Tailwind Variants](https://www.tailwind-variants.org Nuxt UI is SSR compatible and integrates seamlessly with the Nuxt ecosystem (these features also work in Vue with additional configuration): -- [**Icons**](/docs/getting-started/integrations/icons): Access 200,000+ icons from Iconify +::framework-only +#nuxt +:::div +- [**Icons**](/docs/getting-started/integrations/icons/nuxt): Access 200,000+ icons from Iconify - [**Fonts**](/docs/getting-started/integrations/fonts): Plug-and-play web font optimization and configuration -- [**Color Mode**](/docs/getting-started/integrations/color-mode): Dark and Light mode with auto detection -- [**i18n**](/docs/getting-started/integrations/i18n): Internationalize your components with 50+ languages +- [**Color Mode**](/docs/getting-started/integrations/color-mode/nuxt): Dark and Light mode with auto detection +- [**i18n**](/docs/getting-started/integrations/i18n/nuxt): Internationalize your components with 50+ languages - [**Content**](/docs/getting-started/integrations/content): Beautiful typography out of the box +::: + +#vue +:::div +- [**Icons**](/docs/getting-started/integrations/icons/vue): Access 200,000+ icons from Iconify +- [**Color Mode**](/docs/getting-started/integrations/color-mode/vue): Dark and Light mode with auto detection +- [**i18n**](/docs/getting-started/integrations/i18n/vue): Internationalize your components with 50+ languages +::: +:: ### Vue compatibility (Nuxt optional) diff --git a/docs/content/docs/1.getting-started/2.installation/1.nuxt.md b/docs/content/docs/1.getting-started/2.installation/1.nuxt.md index 9b494a5283..e17585ecca 100644 --- a/docs/content/docs/1.getting-started/2.installation/1.nuxt.md +++ b/docs/content/docs/1.getting-started/2.installation/1.nuxt.md @@ -104,7 +104,7 @@ It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace. ``` ::note{to="/docs/components/app"} -The `App` component provides global configurations and is required for **Toast**, **Tooltip** components to work as well as **Programmatic Overlays**. +The `App` component sets up global config and is required for **Toast**, **Tooltip** and **programmatic overlays**. :: :: @@ -394,6 +394,8 @@ This strips **structural** classes too (positioning, transitions, flex/grid), no Use the `theme.defaultVariants` option to override the default `color` and `size` variants for components. +This only affects components whose own default is `primary` or `md`. Components that ship a different default are left untouched, like Avatar with `color: 'neutral'` or Separator with `size: 'xs'`. + - Default: `{ color: 'primary', size: 'md' }`{lang="ts-type"} ```ts [nuxt.config.ts] {4-11} @@ -491,7 +493,7 @@ Use the [`prose`](#prose) option instead. ### `content` -Use the `content` option to force the import of Nuxt UI `` and `` components even if `@nuxt/content` is not installed. +Use the `content` option to force the import of the Nuxt UI `Prose` and `Content` components, such as `ContentNavigation`, `ContentSearch`, `ContentSearchButton`, `ContentSurround` and `ContentToc`, even if `@nuxt/content` is not installed. - Default: `false`{lang="ts-type"} diff --git a/docs/content/docs/1.getting-started/2.installation/2.vue.md b/docs/content/docs/1.getting-started/2.installation/2.vue.md index 0bedce60a6..09eea528ba 100644 --- a/docs/content/docs/1.getting-started/2.installation/2.vue.md +++ b/docs/content/docs/1.getting-started/2.installation/2.vue.md @@ -140,7 +140,7 @@ These declaration files are only written when Vite runs. The default `create-vue :: ::tip -Internally, Nuxt UI relies on custom alias to resolve the theme types. If you're using TypeScript, you should add an alias to your `tsconfig` to enable auto-completion in your `vite.config.ts`. +Internally, Nuxt UI relies on custom aliases to resolve the theme types. If you're using TypeScript, add these aliases to your `tsconfig` files to enable auto-completion in your `vite.config.ts`. ```json [tsconfig.node.json] { @@ -268,7 +268,7 @@ Import the CSS file in your entrypoint. :::code-group{sync="vite"} -```ts [src/main.ts]{1} +```ts [src/main.ts (Vite)]{1} import './assets/css/main.css' import { createApp } from 'vue' @@ -560,7 +560,9 @@ export default defineConfig({ ### `ui` -Use the `ui` option to provide configuration for Nuxt UI. +Use the `ui` option to provide configuration for Nuxt UI. This is the Vue equivalent of the `ui` key in Nuxt's `app.config.ts`. + +- Default: `{}`{lang="ts-type"} ```ts [vite.config.ts] {9-14} import { defineConfig } from 'vite' @@ -582,6 +584,57 @@ export default defineConfig({ }) ``` +### `dts` + +Use the `dts` option to enable or disable the generation of declaration files for auto-imported components and composables. + +- Default: `true`{lang="ts-type"} + +```ts [vite.config.ts] {9} +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import ui from '@nuxt/ui/vite' + +export default defineConfig({ + plugins: [ + vue(), + ui({ + dts: false + }) + ] +}) +``` + +### `icon` + +Use the `icon` option to set default props for the [Icon](/docs/components/icon) component (`size`, `mode`, `customize`) and to configure build-time icon bundling through `clientBundle`. + +- Default: `{}`{lang="ts-type"} + +```ts [vite.config.ts] {9-14} +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import ui from '@nuxt/ui/vite' + +export default defineConfig({ + plugins: [ + vue(), + ui({ + icon: { + mode: 'svg', + clientBundle: { + scan: true + } + } + }) + ] +}) +``` + +::note{to="/docs/getting-started/integrations/icons/vue#collections"} +Learn more about icon collections and client bundling in the **Icons** documentation. +:: + ### `colorMode` Use the `colorMode` option to enable or disable the color mode integration from `@vueuse/core`. @@ -692,6 +745,8 @@ This strips **structural** classes too (positioning, transitions, flex/grid), no Use the `theme.defaultVariants` option to override the default `color` and `size` variants for components. +This only affects components whose own default is `primary` or `md`. Components that ship a different default are left untouched, like Avatar with `color: 'neutral'` or Separator with `size: 'xs'`. + - Default: `{ color: 'primary', size: 'md' }`{lang="ts-type"} ```ts [vite.config.ts] {9-14} @@ -901,7 +956,7 @@ export default defineConfig({ ``` ::note -By default, only `@nuxt/ui` is scanned. Use this option when your external packages contain Vue components that use Nuxt UI. +By default, only `@nuxt/ui` and `@compodium/examples` are scanned. Use this option when your external packages contain Vue components that use Nuxt UI. :: ### `root` :badge{label="4.9+" class="align-text-top"} diff --git a/docs/content/docs/1.getting-started/3.migration/1.v4.md b/docs/content/docs/1.getting-started/3.migration/1.v4.md index 340bb65abc..7d104cbfa0 100644 --- a/docs/content/docs/1.getting-started/3.migration/1.v4.md +++ b/docs/content/docs/1.getting-started/3.migration/1.v4.md @@ -12,7 +12,7 @@ links: Nuxt UI v4 marks a major milestone: **Nuxt UI and Nuxt UI Pro are now unified into a single, fully open-source and free library**. You now have access to 125+ production-ready components, all available in the `@nuxt/ui` package. ::note -Nuxt UI v4 requires **Nuxt 4** due to some dependencies. Make sure to upgrade to Nuxt 4 before migrating to Nuxt UI v4. +Nuxt UI v4 requires **Nuxt 4.1 or later** due to some dependencies. Make sure to upgrade before migrating to Nuxt UI v4. :: This guide provides step-by-step instructions to migrate your application from v3 to v4. @@ -387,7 +387,7 @@ export default defineNuxtConfig({ ``` :: -2. The `useChat` composable API changed — `input` and `handleSubmit` were removed in favor of `sendMessage`, and `messages` is now a ref you set directly: +2. The `useChat` composable API changed: `input` and `handleSubmit` were removed in favor of `sendMessage`, and `messages` is now a ref you set directly: ```diff @@ -38,8 +39,8 @@ const isDark = computed({