bootstrap-vue-next · VividLemon · Oct 23, 2025 · Oct 22, 2025 · Oct 22, 2025 · Oct 22, 2025
diff --git a/apps/docs/src/docs/composables/demo/UseBreadcrumbBasic.vue b/apps/docs/src/docs/composables/demo/UseBreadcrumbBasic.vue
@@ -0,0 +1,35 @@
+<template>
+  <BBreadcrumb />
+
+  <BFormInput
+    v-model="inputValue"
+    class="my-3"
+  />
+
+  <BButton
+    class="me-2"
+    @click="addItem"
+    >Add</BButton
+  >
+  <BButton
+    variant="danger"
+    @click="breadcrumb.reset"
+    >Clear</BButton
+  >
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import {BBreadcrumb, BButton, BFormInput, useBreadcrumb} from 'bootstrap-vue-next'
+
+const breadcrumb = useBreadcrumb()
+
+const inputValue = ref('')
+
+const addItem = () => {
+  if (breadcrumb.items?.value) {
+    breadcrumb.items.value.push(inputValue.value)
+  }
+  inputValue.value = ''
+}
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseBreadcrumbWithId.vue b/apps/docs/src/docs/composables/demo/UseBreadcrumbWithId.vue
@@ -0,0 +1,34 @@
+<template>
+  <BBreadcrumb id="foobar" />
+
+  <BFormInput
+    v-model="inputValue"
+    class="my-3"
+  />
+
+  <BButton
+    class="me-2"
+    @click="addItem"
+    >Add</BButton
+  >
+  <BButton
+    variant="danger"
+    @click="breadcrumb.reset"
+    >Clear</BButton
+  >
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import {BBreadcrumb, BButton, BFormInput, useBreadcrumb} from 'bootstrap-vue-next'
+
+// Input matches the id passed to the component
+const breadcrumb = useBreadcrumb('foobar')
+
+const inputValue = ref('')
+
+const addItem = () => {
+  breadcrumb.items.value.push(inputValue.value)
+  inputValue.value = ''
+}
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseColorModeBasic.vue b/apps/docs/src/docs/composables/demo/UseColorModeBasic.vue
@@ -0,0 +1,23 @@
+<template>
+  <ClientOnly>
+    <BCard ref="target">
+      <BButton @click="changeColor"> Current color: {{ mode }} </BButton>
+    </BCard>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import {useColorMode} from 'bootstrap-vue-next'
+import {type BCard} from 'bootstrap-vue-next/components/BCard'
+
+const target = ref<InstanceType<typeof BCard> | null>(null)
+
+const mode = useColorMode({
+  selector: target,
+})
+
+const changeColor = () => {
+  mode.value = mode.value === 'dark' ? 'light' : 'dark'
+}
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseModalAdvanced.vue b/apps/docs/src/docs/composables/demo/UseModalAdvanced.vue
@@ -0,0 +1,42 @@
+<template>
+  <BButton @click="showMeAdvancedExample">Click me</BButton>
+</template>
+
+<script setup lang="ts">
+import {h, onMounted, onUnmounted, ref} from 'vue'
+import {BButton, useModal} from 'bootstrap-vue-next'
+
+const {create} = useModal()
+
+const firstRef = ref({
+  body: `${Math.random()}`,
+})
+let intervalId: ReturnType<typeof setInterval> | undefined
+
+onMounted(() => {
+  intervalId = setInterval(() => {
+    firstRef.value.body = `${Math.random()}`
+  }, 1000)
+})
+
+onUnmounted(() => {
+  if (intervalId) {
+    clearInterval(intervalId)
+  }
+})
+
+const showMeAdvancedExample = () => {
+  create({
+    slots: {
+      default: (scope) => h('div', null, `custom ${firstRef.value.body} - ${scope.visible}`),
+    },
+  }).show()
+
+  // Demonstration pseudocode, you can import a component and use it
+  // const importedComponent = () => {
+  //   create({
+  //     component: (await import('./TestModal.vue')).default,
+  //   })
+  // }
+}
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseModalBasic.vue b/apps/docs/src/docs/composables/demo/UseModalBasic.vue
@@ -0,0 +1,19 @@
+<template>
+  <BButton @click="showExample">Click me</BButton>
+</template>
+
+<script setup lang="ts">
+import {BButton, useModal} from 'bootstrap-vue-next'
+
+const {create} = useModal()
+
+const showExample = async () => {
+  const value = await create({title: 'Hello World!'}).show()
+
+  if (value && typeof value === 'object' && 'ok' in value && 'trigger' in value) {
+    create({
+      body: `Promise resolved to object with {ok: ${value.ok}, trigger: ${value.trigger}}`,
+    }).show()
+  }
+}
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseModalNested.vue b/apps/docs/src/docs/composables/demo/UseModalNested.vue
@@ -0,0 +1,54 @@
+<template>
+  <BButton @click="nestedModal1 = !nestedModal1">Open First Modal</BButton>
+
+  <BModal
+    v-model="nestedModal1"
+    title="First Modal"
+    ok-only
+  >
+    <p class="my-2">First Modal</p>
+    <BButtonGroup>
+      <BButton @click="nestedModal2 = !nestedModal2">Open Second Modal</BButton>
+      <BButton @click="() => hide()">Hide Last</BButton>
+      <BButton @click="() => hideAll()">Hide All</BButton>
+    </BButtonGroup>
+  </BModal>
+  <BModal
+    v-model="nestedModal2"
+    title="Second Modal"
+    ok-only
+  >
+    <p class="my-2">Second Modal</p>
+    <BButtonGroup>
+      <BButton
+        size="sm"
+        @click="nestedModal3 = !nestedModal3"
+        >Open Third Modal</BButton
+      >
+      <BButton @click="() => hide()">Hide Last</BButton>
+      <BButton @click="() => hideAll()">Hide All</BButton>
+    </BButtonGroup>
+  </BModal>
+  <BModal
+    v-model="nestedModal3"
+    title="Third Modal"
+    ok-only
+  >
+    <p class="my-1">Third Modal</p>
+    <BButtonGroup>
+      <BButton @click="() => hide()">Hide Last</BButton>
+      <BButton @click="() => hideAll()">Hide All</BButton>
+    </BButtonGroup>
+  </BModal>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import {BButton, BButtonGroup, BModal, useModal} from 'bootstrap-vue-next'
+
+const nestedModal1 = ref(false)
+const nestedModal2 = ref(false)
+const nestedModal3 = ref(false)
+
+const {hide, hideAll} = useModal()
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseModalReactive.vue b/apps/docs/src/docs/composables/demo/UseModalReactive.vue
@@ -0,0 +1,31 @@
+<template>
+  <BButton @click="showReactiveExample">Click me</BButton>
+</template>
+
+<script setup lang="ts">
+import {onMounted, onUnmounted, ref} from 'vue'
+import {BButton, useModal} from 'bootstrap-vue-next'
+
+const {create} = useModal()
+
+const title = ref('Hello')
+let intervalId: ReturnType<typeof setInterval> | undefined
+
+onMounted(() => {
+  intervalId = setInterval(() => {
+    title.value = title.value === 'Hello' ? 'World' : 'Hello'
+  }, 2500)
+})
+
+onUnmounted(() => {
+  if (intervalId) {
+    clearInterval(intervalId)
+  }
+})
+
+const showReactiveExample = () => {
+  create({
+    title,
+  }).show()
+}
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseModalSetup.vue b/apps/docs/src/docs/composables/demo/UseModalSetup.vue
@@ -0,0 +1,5 @@
+<template>
+  <BApp>
+    <router-view />
+  </BApp>
+</template>
diff --git a/apps/docs/src/docs/composables/demo/UsePopoverAdvanced.vue b/apps/docs/src/docs/composables/demo/UsePopoverAdvanced.vue
@@ -0,0 +1,21 @@
+<template>
+  <BButton ref="advancedExample">Hover me</BButton>
+</template>
+
+<script setup lang="ts">
+import {h, onMounted, ref} from 'vue'
+import {BButton, usePopover} from 'bootstrap-vue-next'
+
+const {popover} = usePopover()
+const advancedExample = ref<HTMLElement>()
+
+onMounted(() => {
+  popover({
+    slots: {
+      default: (scope) => h('div', null, `Custom content - Visible: ${scope.visible}`),
+    },
+    target: advancedExample.value,
+    title: 'Advanced Popover',
+  })
+})
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UsePopoverBasic.vue b/apps/docs/src/docs/composables/demo/UsePopoverBasic.vue
@@ -0,0 +1,15 @@
+<template>
+  <BButton ref="popoverButton">Hover me</BButton>
+</template>
+
+<script setup lang="ts">
+import {type ComponentPublicInstance, onMounted, ref} from 'vue'
+import {usePopover} from 'bootstrap-vue-next'
+
+const {popover} = usePopover()
+const popoverButton = ref<ComponentPublicInstance>()
+
+onMounted(() => {
+  popover({title: 'Hello World!', body: 'This is a popover.', target: popoverButton.value})
+})
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UsePopoverLifecycleAwaitUsing.ts b/apps/docs/src/docs/composables/demo/UsePopoverLifecycleAwaitUsing.ts
@@ -0,0 +1,10 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {usePopover} from 'bootstrap-vue-next'
+
+{
+  const {popover} = usePopover()
+
+  // #region snippet
+  await using pop = popover({title: 'Hello World!'})
+  // #endregion snippet
+}
diff --git a/apps/docs/src/docs/composables/demo/UsePopoverLifecycleManual.ts b/apps/docs/src/docs/composables/demo/UsePopoverLifecycleManual.ts
@@ -0,0 +1,12 @@
+import {usePopover} from 'bootstrap-vue-next'
+
+{
+  const {popover} = usePopover()
+
+  // #region snippet
+  const pop = popover({title: 'Hello World!'})
+  pop.show()
+  // do something
+  pop.destroy()
+  // #endregion snippet
+}
diff --git a/apps/docs/src/docs/composables/demo/UsePopoverReactive.vue b/apps/docs/src/docs/composables/demo/UsePopoverReactive.vue
@@ -0,0 +1,31 @@
+<template>
+  <BButton ref="reactiveExample">Hover me</BButton>
+</template>
+
+<script setup lang="ts">
+import {onMounted, onUnmounted, ref} from 'vue'
+import {BButton, usePopover} from 'bootstrap-vue-next'
+
+const {tooltip} = usePopover()
+
+const title = ref('Hello')
+const reactiveExample = ref<HTMLElement>()
+let intervalId: NodeJS.Timeout | undefined
+
+onMounted(() => {
+  intervalId = setInterval(() => {
+    title.value = title.value === 'Hello' ? 'World' : 'Hello'
+  }, 2500)
+
+  tooltip({
+    title,
+    target: reactiveExample.value,
+  })
+})
+
+onUnmounted(() => {
+  if (intervalId !== undefined) {
+    clearInterval(intervalId)
+  }
+})
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UsePopoverSetup.vue b/apps/docs/src/docs/composables/demo/UsePopoverSetup.vue
@@ -0,0 +1,5 @@
+<template>
+  <BApp>
+    <router-view />
+  </BApp>
+</template>