Merge branch 'v3' into feat/init-blog

docs/app/app.vue

@@ -53,7 +53,7 @@ provide('navigation', mappedNavigation)
     <NuxtLoadingIndicator color="var(--ui-primary)" :height="2" />
 
     <template v-if="!route.path.startsWith('/examples')">
-      <Banner />
+      <!-- <Banner /> -->
 
       <Header :links="links" />
     </template>

docs/app/components/content/ComponentPropsSchema.vue

@@ -38,7 +38,7 @@ const schemaProps = computed(() => {
 </script>
 
 <template>
-  <ProseCollapsible v-if="schemaProps?.length" class="mt-1">
+  <ProseCollapsible v-if="schemaProps?.length" class="mt-1 mb-0">
     <ProseUl>
       <ProseLi v-for="schemaProp in schemaProps" :key="schemaProp.name">
         <HighlightInlineType :type="`${schemaProp.name}${schemaProp.required === false ? '?' : ''}: ${schemaProp.type}`" />

docs/app/error.vue

@@ -59,7 +59,7 @@ provide('navigation', mappedNavigation)
   <UApp>
     <NuxtLoadingIndicator color="#FFF" />
 
-    <Banner />
+    <!-- <Banner /> -->
 
     <Header :links="links" />
 

docs/content/3.components/navigation-menu.md

@@ -21,10 +21,10 @@ Use the `items` prop as an array of objects with the following properties:
 - `icon?: string`{lang="ts-type"}
 - `avatar?: AvatarProps`{lang="ts-type"}
 - `badge?: string | number | BadgeProps`{lang="ts-type"}
-- `tooltip?: TooltipProps`{lang="ts-type"}
+- `tooltip?: TooltipProps`{lang="ts-type"} :badge{label="Soon"}
 - `trailingIcon?: string`{lang="ts-type"}
 - `type?: 'label' | 'link'`{lang="ts-type"}
-- `collapsible?: boolean`{lang="ts-type"}
+- `collapsible?: boolean`{lang="ts-type"} :badge{label="Soon"}
 - `defaultOpen?: boolean`{lang="ts-type"}
 - `open?: boolean`{lang="ts-type"}
 - `value?: string`{lang="ts-type"}
@@ -144,7 +144,7 @@ Each item can take a `children` array of objects with the following properties t
 Use the `orientation` prop to change the orientation of the NavigationMenu.
 
 ::note
-When orientation is `vertical`, a [Collapsible](/components/collapsible) component is used to display children. You can control the open state of each item using the `open` and `defaultOpen` properties. You can also use the `collapsible` property to control if the item is collapsible.
+When orientation is `vertical`, a [Collapsible](/components/collapsible) component is used to display children. You can control the open state of each item using the `open` and `defaultOpen` properties.
 ::
 
 ::component-code
@@ -241,6 +241,108 @@ props:
 Groups will be spaced when orientation is `horizontal` and separated when orientation is `vertical`.
 ::
 
+### Collapsed
+
+Use the `collapsed` prop to collapse the NavigationMenu, this can be useful in a sidebar for example.
+
+::component-code
+---
+collapse: true
+ignore:
+  - items
+  - orientation
+  - class
+external:
+  - items
+externalTypes:
+  - NavigationMenuItem[][]
+props:
+  collapsed: true
+  orientation: 'vertical'
+  items:
+    - - label: Links
+        type: 'label'
+      - label: Guide
+        icon: i-lucide-book-open
+        children:
+          - label: Introduction
+            description: Fully styled and customizable components for Nuxt.
+            icon: i-lucide-house
+          - label: Installation
+            description: Learn how to install and configure Nuxt UI in your application.
+            icon: i-lucide-cloud-download
+          - label: 'Icons'
+            icon: 'i-lucide-smile'
+            description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+          - label: 'Colors'
+            icon: 'i-lucide-swatch-book'
+            description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
+          - label: 'Theme'
+            icon: 'i-lucide-cog'
+            description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+      - label: Composables
+        icon: i-lucide-database
+        collapsible: false
+        open: false
+        children:
+          - label: defineShortcuts
+            icon: i-lucide-file-text
+            description: Define shortcuts for your application.
+            to: /composables/define-shortcuts
+          - label: useOverlay
+            icon: i-lucide-file-text
+            description: Display a modal/slideover within your application.
+            to: /composables/use-overlay
+          - label: useToast
+            icon: i-lucide-file-text
+            description: Display a toast within your application.
+            to: /composables/use-toast
+      - label: Components
+        icon: i-lucide-box
+        collapsible: false
+        open: false
+        to: /components
+        active: true
+        children:
+          - label: Link
+            icon: i-lucide-file-text
+            description: Use NuxtLink with superpowers.
+            to: /components/link
+          - label: Modal
+            icon: i-lucide-file-text
+            description: Display a modal within your application.
+            to: /components/modal
+          - label: NavigationMenu
+            icon: i-lucide-file-text
+            description: Display a list of links.
+            to: /components/navigation-menu
+          - label: Pagination
+            icon: i-lucide-file-text
+            description: Display a list of pages.
+            to: /components/pagination
+          - label: Popover
+            icon: i-lucide-file-text
+            description: Display a non-modal dialog that floats around a trigger element.
+            to: /components/popover
+          - label: Progress
+            icon: i-lucide-file-text
+            description: Show a horizontal bar to indicate task progression.
+            to: /components/progress
+    - - label: GitHub
+        icon: i-simple-icons-github
+        badge: 3.8k
+        to: https://github.com/nuxt/ui
+        target: _blank
+      - label: Help
+        icon: i-lucide-circle-help
+        disabled: true
+---
+::
+
+::tip
+You can set the `collapsible: false` property on items with children to prevent them from being collapsible. This allows the item to act as a regular link while still displaying its children in a submenu.
+::
+
 ### Highlight
 
 Use the `highlight` prop to display a highlighted border for the active item.
@@ -782,6 +884,126 @@ You can inspect the DOM to see each item's content being rendered.
 
 ## Examples
 
+### With tooltips in items :badge{label="Soon" class="align-text-top"}
+
+You can use the `tooltip` property to display a [Tooltip](/components/tooltip) around an item. This can be useful when the menu is collapsed.
+
+::component-code
+---
+collapse: true
+ignore:
+  - items
+  - orientation
+  - class
+external:
+  - items
+externalTypes:
+  - NavigationMenuItem[][]
+props:
+  collapsed: true
+  orientation: 'vertical'
+  items:
+    - - label: Links
+        type: 'label'
+      - label: Guide
+        icon: i-lucide-book-open
+        tooltip:
+          text: 'Guide'
+        children:
+          - label: Introduction
+            description: Fully styled and customizable components for Nuxt.
+            icon: i-lucide-house
+            tooltip:
+              text: 'Introduction'
+          - label: Installation
+            description: Learn how to install and configure Nuxt UI in your application.
+            icon: i-lucide-cloud-download
+            tooltip:
+              text: 'Installation'
+          - label: 'Icons'
+            icon: 'i-lucide-smile'
+            description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+            tooltip:
+              text: 'Icons'
+          - label: 'Colors'
+            icon: 'i-lucide-swatch-book'
+            description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
+            tooltip:
+              text: 'Colors'
+          - label: 'Theme'
+            icon: 'i-lucide-cog'
+            description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+            tooltip:
+              text: 'Theme'
+      - label: Composables
+        icon: i-lucide-database
+        tooltip:
+          text: 'Composables'
+        collapsible: false
+        open: false
+        children:
+          - label: defineShortcuts
+            icon: i-lucide-file-text
+            description: Define shortcuts for your application.
+            to: /composables/define-shortcuts
+          - label: useOverlay
+            icon: i-lucide-file-text
+            description: Display a modal/slideover within your application.
+            to: /composables/use-overlay
+          - label: useToast
+            icon: i-lucide-file-text
+            description: Display a toast within your application.
+            to: /composables/use-toast
+      - label: Components
+        icon: i-lucide-box
+        tooltip:
+          text: 'Components'
+        to: /components
+        active: true
+        collapsible: false
+        open: false
+        children:
+          - label: Link
+            icon: i-lucide-file-text
+            description: Use NuxtLink with superpowers.
+            to: /components/link
+          - label: Modal
+            icon: i-lucide-file-text
+            description: Display a modal within your application.
+            to: /components/modal
+          - label: NavigationMenu
+            icon: i-lucide-file-text
+            description: Display a list of links.
+            to: /components/navigation-menu
+          - label: Pagination
+            icon: i-lucide-file-text
+            description: Display a list of pages.
+            to: /components/pagination
+          - label: Popover
+            icon: i-lucide-file-text
+            description: Display a non-modal dialog that floats around a trigger element.
+            to: /components/popover
+          - label: Progress
+            icon: i-lucide-file-text
+            description: Show a horizontal bar to indicate task progression.
+            to: /components/progress
+    - - label: GitHub
+        icon: i-simple-icons-github
+        badge: 3.8k
+        to: https://github.com/nuxt/ui
+        target: _blank
+        tooltip:
+          text: 'GitHub'
+          kbds:
+            - 3.8k
+      - label: Help
+        icon: i-lucide-circle-help
+        disabled: true
+        tooltip:
+          text: 'Help'
+---
+::
+
 ### Control active item
 
 You can control the active item by using the `default-value` prop or the `v-model` directive with the index of the item.

docs/package.json

@@ -3,10 +3,10 @@
   "name": "@nuxt/ui-docs",
   "type": "module",
   "dependencies": {
-    "@ai-sdk/vue": "^1.2.11",
+    "@ai-sdk/vue": "^1.2.12",
     "@iconify-json/logos": "^1.2.4",
-    "@iconify-json/lucide": "^1.2.41",
+    "@iconify-json/lucide": "^1.2.42",
-    "@iconify-json/simple-icons": "^1.2.33",
+    "@iconify-json/simple-icons": "^1.2.34",
     "@iconify-json/vscode-icons": "^1.2.20",
     "@nuxt/content": "^3.5.1",
     "@nuxt/image": "^1.10.0",
@@ -32,7 +32,7 @@
     "superstruct": "^2.0.2",
     "ufo": "^1.6.1",
     "valibot": "^1.1.0",
-    "workers-ai-provider": "^0.3.1",
+    "workers-ai-provider": "^0.3.2",
     "yup": "^1.6.1",
     "zod": "^3.24.4"
   },

package.json

@@ -115,14 +115,14 @@
     "@iconify/vue": "^4.3.0",
     "@internationalized/date": "^3.8.0",
     "@internationalized/number": "^3.6.1",
-    "@nuxt/fonts": "^0.11.2",
+    "@nuxt/fonts": "^0.11.3",
     "@nuxt/icon": "^1.12.0",
     "@nuxt/kit": "^3.17.2",
     "@nuxt/schema": "^3.17.2",
     "@nuxtjs/color-mode": "^3.5.2",
     "@standard-schema/spec": "^1.0.0",
-    "@tailwindcss/postcss": "^4.1.5",
+    "@tailwindcss/postcss": "^4.1.6",
-    "@tailwindcss/vite": "^4.1.5",
+    "@tailwindcss/vite": "^4.1.6",
     "@tanstack/vue-table": "^8.21.3",
     "@unhead/vue": "^2.0.8",
     "@vueuse/core": "^13.1.0",
@@ -147,7 +147,7 @@
     "reka-ui": "^2.2.1",
     "scule": "^1.3.0",
     "tailwind-variants": "^1.0.0",
-    "tailwindcss": "^4.1.5",
+    "tailwindcss": "^4.1.6",
     "tinyglobby": "^0.2.13",
     "unplugin": "^2.3.2",
     "unplugin-auto-import": "^19.2.0",
@@ -156,14 +156,14 @@
     "vue-component-type-helpers": "^2.2.10"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^1.3.0",
+    "@nuxt/eslint-config": "^1.3.1",
     "@nuxt/module-builder": "^1.0.1",
     "@nuxt/test-utils": "^3.18.0",
     "@release-it/conventional-changelog": "^10.0.1",
     "@vue/test-utils": "^2.4.6",
     "embla-carousel": "^8.6.0",
     "eslint": "^9.26.0",
-    "happy-dom": "^17.4.6",
+    "happy-dom": "^17.4.7",
     "nuxt": "^3.17.2",
     "release-it": "^19.0.2",
     "vitest": "^3.1.3",

playground-vue/package.json

@@ -16,7 +16,7 @@
     "zod": "^3.24.4"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue": "^5.2.4",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
     "vue-tsc": "^2.2.10"

playground/package.json

@@ -9,8 +9,8 @@
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.41",
+    "@iconify-json/lucide": "^1.2.42",
-    "@iconify-json/simple-icons": "^1.2.33",
+    "@iconify-json/simple-icons": "^1.2.34",
     "@nuxt/ui": "latest",
     "@nuxthub/core": "^0.8.27",
     "nuxt": "^3.17.2",

src/runtime/components/Toast.vue

@@ -29,6 +29,11 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
    * @defaultValue 'vertical'
    */
   orientation?: Toast['variants']['orientation']
+  /**
+   * Whether to show the progress bar.
+   * @defaultValue true
+   */
+  progress?: boolean
   /**
    * Display a list of actions:
    * - under the title and description when orientation is `vertical`
@@ -76,7 +81,8 @@ import UButton from './Button.vue'
 
 const props = withDefaults(defineProps<ToastProps>(), {
   close: true,
-  orientation: 'vertical'
+  orientation: 'vertical',
+  progress: true
 })
 const emits = defineEmits<ToastEmits>()
 const slots = defineSlots<ToastSlots>()
@@ -179,6 +185,6 @@ defineExpose({
       </ToastClose>
     </div>
 
-    <div v-if="remaining > 0 && duration" :class="ui.progress({ class: props.ui?.progress })" :style="{ width: `${remaining / duration * 100}%` }" />
+    <div v-if="progress && remaining > 0 && duration" :class="ui.progress({ class: props.ui?.progress })" :style="{ width: `${remaining / duration * 100}%` }" />
   </ToastRoot>
 </template>

src/runtime/components/Toaster.vue

@@ -17,6 +17,11 @@ export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'>
    * @defaultValue true
    */
   expand?: boolean
+  /**
+   * Whether to show the progress bar on all toasts.
+   * @defaultValue true
+   */
+  progress?: boolean
   /**
    * Render the toaster in a portal.
    * @defaultValue true
@@ -49,7 +54,8 @@ import UToast from './Toast.vue'
 const props = withDefaults(defineProps<ToasterProps>(), {
   expand: true,
   portal: true,
-  duration: 5000
+  duration: 5000,
+  progress: true
 })
 defineSlots<ToasterSlots>()
 
@@ -109,6 +115,7 @@ function getOffset(index: number) {
       v-for="(toast, index) of toasts"
       :key="toast.id"
       ref="refs"
+      :progress="progress"
       v-bind="omit(toast, ['id', 'close'])"
       :close="(toast.close as boolean)"
       :data-expanded="expanded"
@@ -121,9 +128,7 @@ function getOffset(index: number) {
         '--translate': expanded ? 'calc(var(--offset) * var(--translate-factor))' : 'calc(var(--before) * var(--gap))',
         '--transform': 'translateY(var(--translate)) scale(var(--scale))'
       }"
-      :class="[ui.base(), {
+      :class="ui.base({ class: [props.ui?.base, toast.onClick ? 'cursor-pointer' : undefined] })"
-        'cursor-pointer': !!toast.onClick
-      }]"
       @update:open="onUpdateOpen($event, toast.id)"
       @click="toast.onClick && toast.onClick(toast)"
     />

src/runtime/vue/composables/useAppConfig.ts

@@ -1,3 +1,6 @@
+import { reactive } from 'vue'
 import appConfig from '#build/app.config'
 
-export const useAppConfig = () => appConfig
+const _appConfig = reactive(appConfig)
+
+export const useAppConfig = () => _appConfig

src/runtime/vue/stubs.ts

@@ -9,6 +9,7 @@ import { useColorMode as useColorModeVueUse } from '@vueuse/core'
 export { useHead } from '@unhead/vue'
 export { useRoute, useRouter } from 'vue-router'
 
+export { useAppConfig } from './composables/useAppConfig'
 export { defineShortcuts } from '../composables/defineShortcuts'
 export { defineLocale } from '../composables/defineLocale'
 export { useLocale } from '../composables/useLocale'
@@ -30,8 +31,6 @@ export const useColorMode = () => {
   }
 }
 
-export const useAppConfig = () => appConfig
-
 export const useCookie = <T = string>(
   _name: string,
   _options: Record<string, any> = {}