Composables
BootstrapVueNext exposes several custom composables that integrate with various components.
useBreadcrumb is a helper utility for the BBreadcrumb component. It provides a globally changable context so you can modify a breadcrumb. It should be noted that the breadcrumb component will automatically use the global context by default. useBreadcrumb is shared globally, one modification to the state will be recognized throughout the app. As noted in the BBreadcrumb documentation, the items prop for the component takes precedence over useBreadcrumbuseColorMode provides a convenient utility to adjust the global color theme of your application. You can also use it to target specific components by using a template ref or a selector. Bootstrap's default behavior dictates that color modes are applied to all children in the branch. useColorMode is simply a wrapper for the vueuse utility.The
useModal composable provides a powerful API to create, manage, and control modals programmatically from anywhere in your application. It allows you to create modals on-demand, manage existing modals, and handle modal interactions through promises.The
usePopover composable allows you to create and control popovers and tooltips dynamically from anywhere in your application. It provides methods to create, show, hide, and manage both popovers and tooltips programmatically.The
useScrollspy composable provides automatic navigation highlighting based on scroll position. It tracks the visibility of content elements and automatically updates the active state of corresponding navigation items, making it perfect for table of contents, documentation navigation, and section-based layouts.The
useToast composable allows you to create and manage toasts programmatically from anywhere in your application. It provides a simple API to show toast messages without needing to declare toast components in your templates.You can use
useToggle to get the closest toggleable component in child component and show,hide or toggle it. It can also be supplied a target id to show, hide or toggle a specific component