Orchestrator
TheBOrchestrator component manages the rendering and positioning of dynamic components like modals, toasts, and popovers. It works withBApp to provide a centralized orchestration layer.
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 byBApp and not directly in user applications. This documentation is provided for advanced use cases and internal understanding.
HTML
vue
<template> <BOrchestrator append-toast /></template><script setup lang="ts">import {BOrchestrator}from 'bootstrap-vue-next'</script>Advanced Usage
Custom Filtering
HTML
vue
<template> <BOrchestrator :filter="customFilter" /></template><script setup lang="ts">import {BOrchestrator,type OrchestratorArrayValue}from 'bootstrap-vue-next'const customFilter = (item: OrchestratorArrayValue)=> // Only show high priority items item.options?.keep!== false</script>Selective Component Types
template
<template> <!-- Only render toasts, no modals or popovers --> <BOrchestrator no-modals no-popovers /></template>Related Components
BApp- Provides the orchestrator registryBModal- Can be orchestratedBToast- Can be orchestratedBPopover- Can be orchestrated
Component Reference
Component Reference
<BOrchestrator>
Adding styles:
.orchestrator| Prop | Type | Default | Description |
|---|---|---|---|
| append-toast | boolean | false | 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-modals | boolean | false | If `true`, prevents modal components from being rendered. |
| no-popovers | boolean | false | If `true`, prevents popover components from being rendered. |
| no-toasts | boolean | false | If `true`, prevents toast components from being rendered. |
| teleport-to | string | Element | null | undefined | null | 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. |