docs(modal/slideover): improve programmatic examples (#4556 )

Co-authored-by: Eugen Istoc <eugenistoc@gmail.com>
fix(NavigationMenu/Tabs): display badge when not undefined
2026-01-15 12:39:35 +01:00 · 2025-07-21 19:07:55 +02:00 · 2025-07-21 18:29:48 +02:00 · 2025-07-21 18:07:10 +02:00
5 changed files with 32 additions and 15 deletions
--- a/docs/app/components/content/examples/modal/ModalProgrammaticExample.vue
+++ b/docs/app/components/content/examples/modal/ModalProgrammaticExample.vue
@@ -6,14 +6,12 @@ const count = ref(0)
 const toast = useToast()
 const overlay = useOverlay()

-const modal = overlay.create(LazyModalExample, {
-  props: {
-    count: count.value
-  }
-})
+const modal = overlay.create(LazyModalExample)

 async function open() {
-  const instance = modal.open()
+  const instance = modal.open({
+    count: count.value
+  })

  const shouldIncrement = await instance.result

--- a/docs/app/components/content/examples/slideover/SlideoverProgrammaticExample.vue
+++ b/docs/app/components/content/examples/slideover/SlideoverProgrammaticExample.vue
@@ -6,14 +6,12 @@ const count = ref(0)
 const toast = useToast()
 const overlay = useOverlay()

-const slideover = overlay.create(LazySlideoverExample, {
-  props: {
-    count: count.value
-  }
-})
+const slideover = overlay.create(LazySlideoverExample)

 async function open() {
-  const instance = slideover.open()
+  const instance = slideover.open({
+    count: count.value
+  })

  const shouldIncrement = await instance.result

--- a/docs/content/1.getting-started/2.installation/2.vue.md
+++ b/docs/content/1.getting-started/2.installation/2.vue.md
@@ -183,7 +183,28 @@ It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace.
 ```

 ::note{to="/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**.
+::
+
+#### Add the `isolate` class to your root container
+
+```html [index.html]{9}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nuxt UI</title>
+  </head>
+  <body>
+    <div id="app" class="isolate"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
+```
+
+::note
+This ensures styles are scoped to your app and prevents issues with overlays and stacking contexts.
 ::

 ::
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -272,7 +272,7 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
      <component :is="orientation === 'vertical' && item.children?.length && !collapsed ? AccordionTrigger : 'span'" v-if="(!collapsed || orientation !== 'vertical') && (item.badge || (orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length) || item.trailingIcon || !!slots[(item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>])" as="span" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })" @click.stop.prevent>
        <slot :name="((item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
          <UBadge
-            v-if="item.badge"
+            v-if="item.badge !== undefined"
            color="neutral"
            variant="outline"
            :size="((item.ui?.linkTrailingBadgeSize || props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()) as BadgeProps['size'])"
--- a/src/runtime/components/Tabs.vue
+++ b/src/runtime/components/Tabs.vue
@@ -148,7 +148,7 @@ defineExpose({

        <slot name="trailing" :item="item" :index="index">
          <UBadge
-            v-if="item.badge"
+            v-if="item.badge !== undefined"
            color="neutral"
            variant="outline"
            :size="((item.ui?.trailingBadgeSize || props.ui?.trailingBadgeSize || ui.trailingBadgeSize()) as BadgeProps['size'])"
Author	SHA1	Message	Date
Hugo Richard	9f60443731	docs(modal/slideover): improve programmatic examples (#4556 ) Co-authored-by: Eugen Istoc <eugenistoc@gmail.com>	2025-07-21 19:07:55 +02:00
Benjamin Canac	b22891abe6	fix(NavigationMenu/Tabs): display badge when not undefined	2025-07-21 18:29:48 +02:00
Benjamin Canac	9cda333631	docs(installation): add vue isolate section	2025-07-21 18:07:10 +02:00