BOrchestrator ​

The BOrchestrator component manages the rendering and positioning of dynamic components like modals, toasts, and popovers. It works with BApp to provide a centralized orchestration layer.

Edit this page on GitHub

Overview ​

BOrchestrator serves as the rendering engine for dynamic components, providing:

  • Centralized rendering - Manages all modals, toasts, and popovers in one place
  • Position management - Handles positioning toasts
  • Filtering capabilities - Allows selective rendering of component types
  • Event handling - Manages component events and promise resolution

Internal Usage ​

Note: BOrchestrator is typically used internally by BApp and not directly in user applications. This documentation is provided for advanced use cases and internal understanding.

vue
<template>
  <BOrchestrator append-toast />
</template>

<script setup lang="ts">
import {BOrchestrator} from 'bootstrap-vue-next'
</script>

Advanced Usage ​

Custom Filtering ​

vue
<template>
  <BOrchestrator :filter="customFilter" />
</template>

<script setup lang="ts">
import {BOrchestrator} from 'bootstrap-vue-next'
import type {OrchestratorArrayValue} from 'bootstrap-vue-next'

const customFilter = (item: OrchestratorArrayValue) => {
  // Only show high-priority items
  return item.options?.priority === 'high'
}
</script>

Selective Component Types ​

vue
<template>
  <!-- Only render toasts, no modals or popovers -->
  <BOrchestrator no-modals no-popovers />
</template>
  • BApp - Provides the orchestrator registry
  • BModal - Can be orchestrated
  • BToast - Can be orchestrated
  • BPopover - Can be orchestrated

Component Reference ​

Component Reference

<BOrchestrator>

View Source
Adding styles: .orchestrator
Properties
PropTypeDefaultDescription
append-toastbooleanfalse If `true`, new toasts are appended to the end of the list instead of the beginning.
filter(item: OrchestratorArrayValue) => boolean'() => true' Custom filter function to control which orchestrator items are rendered.
no-modalsbooleanfalse If `true`, prevents modal components from being rendered.
no-popoversbooleanfalse If `true`, prevents popover components from being rendered.
no-toastsbooleanfalse If `true`, prevents toast components from being rendered.
teleport-tostring | Element | null | undefinednull Specifies the element to which the orchestrator components should be teleported. This is useful if you want to move them to a different part of the DOM.