Toast

Push notifications to your visitors with BToast and BToastOrchestrator. These are components that are easily customizable for generating alert messages

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. Toasts are intended to be small interruptions to your visitors or users and therefore should contain minimal, to-the-point, non-interactive content. Please refer to the Accessibility Tips section below for important usage information

Overview

This section only refers to using the raw component variation. Often times, Toasts are generated in a global context programatically, like showing a success message after saving a form. That functionality is covered under the composable docs here

The component variation is shown by using the v-model like so

Body

HTML

vue

<template>
  <BToast v-model="active" variant="info">
    <template #title> Title </template>
    Body
  </BToast>
</template>

<script setup lang="ts">
const isActive = ref(false)
</script>

By default Toasts are rendered in place. You can use Vue's Teleport to change the location, commonly to body

Positioning

In combination with Teleport, you can render Toasts above the page, and in specific locations. You will need to create a wrapper component around said Toast to declare its location

HTML

vue

<template>
  <template v-for="(pos, index) in values" :key="index">
    <BButton @click="values[index] = !values[index]">
      {{ locations[index] }}
    </BButton>
    <Teleport to="body">
      <div :class="locations[index]" class="toast-container position-fixed p-3">
        <BToast v-model="values[index]">
          <template #title> Title </template>
          {{ locations[index] }}
        </BToast>
      </div>
    </Teleport>
  </template>
</template>

<script setup lang="ts">
const locations = [
  'top-0 start-0',
  'top-0 start-50 translate-middle-x',
  'top-0 end-0',
  'top-50 start-0 translate-middle-y',
  'top-50 start-50 translate-middle',
  'top-50 end-0 translate-middle-y',
  'bottom-0 start-0',
  'bottom-0 start-50 translate-middle-x',
  'bottom-0 end-0',
]

const values = ref(Array.from({length: locations.length}, () => false))
</script>

Static placement

You can place toasts in static placements, and with more control by using them directly. Although, it is more uncommon

Body

HTML

template

<BToast v-model="active" variant="info">
  <template #title>
    Title
  </template>
    Body
</BToast>
<BButton @click="active = !active">Toggle</BButton>

HTML

vue

<template>
  <BButton
    @click="
      show?.({
        props: {
          title: 'Counting down!',
          variant: 'info',
          pos: 'middle-center',
          value: 10000,
          progressProps: {
            variant: 'danger',
          },
          body: 'Watch me!',
        },
      })
    "
  >
    Show
  </BButton>
</template>

HTML

vue

<template>
  <BButton
    @click="
      show?.({props: {href: 'https://getbootstrap.com/', target: '_blank', body: 'I am a BLink'}})
    "
  >
    Show
  </BButton>
</template>

<script setup lang="ts">
const {show} = useToastController()
</script>

Component Reference

`<BToast>`

View Source

<BToast> Properties
<BToast> Events

Adding styles: .toast

Properties

Prop	Type	Default	Description
bg-variant	`ColorVariant \| null`	`null`
body	`string`	`undefined`	The text content of the body
body-class	`ClassValue`	`undefined`	CSS class (or classes) to add to the toast body element
close-class	`ClassValue`	`undefined`	Applies one or more custom classes to the close button
close-content	`string`	`undefined`	Sets the text of the close button. The `close` slot takes precedence
close-label	`string`	`'Close'`	Sets the aria-label attribute on the close button
close-variant	`string \| null`	`null`	Color variant for the close button
header-class	`ClassValue`	`undefined`	CSS class (or classes) to add to the toast header element
header-tag	`string`	`'div'`	Specify the HTML tag to render instead of the default tag for the footer
id	`string`	`undefined`	Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed
initial-animation	`boolean`	`false`	When set, enables the initial animation on mount
interval	`number \| requestAnimationFrame`	`'requestAnimationFrame'`	The interval of which the countdown timer will refresh itself
is-status	`boolean`	`false`	When set to 'true', makes the toast have attributes aria-live=polite and role=status. When 'false' aria-live will be 'assertive' and role will be 'alert'
lazy	`boolean`	`false`	When set, the content will not be mounted until opened
model-value	`boolean \| number`	`false`	Sets if the toast is visible or the number of milliseconds that the toast will be dismissed
no-animation	`boolean`	`false`	When set, disables the animation
no-close-button	`boolean`	`false`	When set, hides the close button in the toast header
no-fade	`boolean`	`false`	Alias for `noAnimation`
no-hover-pause	`boolean`	`false`	When set to true, disables pausing the timer on hover behavior
no-resume-on-hover-leave	`boolean`	`false`	When set to true, the timer will not resume when the mouse leaves the element. It will need to be manually resumed
progress-props	`Omit<BProgressBarProps, 'label' \| 'max' \| 'value'>`	`undefined`	The properties to define the progress bar in the toast. No progress will be shown if left undefined
show	`boolean`	`false`	When set, and prop 'visible' is false on mount, will animate from closed to open on initial mount. Mainly to help with template show. Use model-value for reactive show/hide
show-on-pause	`boolean`	`true`	When set, keeps the toast visible when it's paused
solid	`boolean`	`false`	When set, renders the toast with a solid background rather than translucent
text-variant	`TextColorVariant \| null`	`null`
title	`string`	`undefined`	The toast's title text
toast-class	`ClassValue`	`undefined`	CSS class (or classes) to add to the toast wrapper element
trans-props	`TransitionProps`	`undefined`	Transition properties
unmount-lazy	`boolean`	`false`	When set and `lazy` is true, the content will be unmounted when closed
variant	`ColorVariant \| null`	`null`	Applies one of the Bootstrap theme color variants to the component. When implemented `bg-variant` and `text-variant` will take precedence
visible	`boolean`	`false`	When 'true', open without animation

Extensions:

BLink props

Prop	Type	Default	Description
active	`boolean`	`undefined`	When set to `true`, places the component in the active state with active styling
active-class	`string`	`'router-link-active'`	Configure the active CSS class applied when the link is active.
disabled	`boolean`	`false`	When set to `true`, disables the link's functionality. See above for details and limitations
exact-active-class	`string`	`'router-link-exact-active'`	Configure the active CSS class applied when the link is active with exact match.
href	`string`	`undefined`	Denotes the target URL of the link for standard a links
icon	`boolean`	`false`	When set to `true`, styles an icon at the beginning or end of the link text
no-prefetch	`boolean`	`false`	To improve the responsiveness of your Nuxt.js applications, when the link will be displayed within the viewport, Nuxt.js will automatically prefetch the code splitted page. Setting `no-prefetch` will disabled this feature for the specific link
no-rel		`undefined`
opacity	`10 \| 25 \| 50 \| 75 \| 100 \| '10' \| '25' \| '50' \| '75' \| '100'`	`undefined`	Change the alpha opacity of the link `rgba()` color value
opacity-hover	`10 \| 25 \| 50 \| 75 \| 100 \| '10' \| '25' \| '50' \| '75' \| '100'`	`undefined`	Change the alpha opacity of the link `rgba()` color value on hover
prefetch	`boolean`	`undefined`	To improve the responsiveness of your Nuxt.js applications, when the link will be displayed within the viewport, Nuxt.js will automatically prefetch the code splitted page. Setting `prefetch` to `true` or `false` will overwrite the default value of `router.prefetchLinks`
prefetch-on	`Partial<{visibility: boolean, interaction: boolean}>`	`undefined`	Allows custom control of when to prefetch links. Possible options are 'interaction' and 'visibility' (default).
prefetched-class	`string`	`undefined`	Not Yet Implmented: A class to apply to links that have been prefetched.
rel	`string`	`undefined`	Sets the 'rel' attribute on the rendered link
replace	`boolean`	`false`	Setting replace prop will call router.replace() instead of router.push() when clicked
router-component-name	`string`	`'router-link'`	BootstrapVue auto detects between `<router-link>` and `<nuxt-link>`. Set this this property to explicity set the name of the router component.
router-tag	`string`	`'a'`	Set the tag type for the link
stretched	`boolean`	`false`	When set to `true`, makes the link's `containing block` clickable via an `::after` pseudo element
target	`LinkTarget`	`undefined`	Sets the 'target' attribute on the rendered link
to	`RouteLocationRaw`	`undefined`	Denotes the target route of the link. When clicked, the value of the to prop will be passed to `router.push()` internally
underline-offset	`1 \| 2 \| 3 \| '1' \| '2' \| '3'`	`undefined`	Change the distance of the underline from the bottom of the link text
underline-offset-hover	`1 \| 2 \| 3 \| '1' \| '2' \| '3'`	`undefined`	Change the distance of the underline from the bottom of the link text on hover
underline-opacity	`0 \| 10 \| 25 \| 50 \| 75 \| 100 \| '0' \| '10' \| '25' \| '50' \| '75' \| '100'`	`undefined`	Set's the opacity of the link's underline
underline-opacity-hover	`0 \| 10 \| 25 \| 50 \| 75 \| 100 \| '0' \| '10' \| '25' \| '50' \| '75' \| '100'`	`undefined`	Set's the opacity of the link's underline on hover
underline-variant	`ColorVariant \| null`	`null`	Set the color variant for the link underline independently of the link text
variant	`ColorVariant \| null`	`null`	Set the color variant for the link

Events

Event	Args	Description
close	`value: BvTriggerableEvent`
close-countdown	`value: number`
destroyed	`destroyed: string`
hidden	`value: BvTriggerableEvent`
hide	`value: BvTriggerableEvent`
hide-prevented
show	`value: BvTriggerableEvent`
show-prevented
shown	`value: BvTriggerableEvent`
update:model-value	`value: Boolean` - The resulting value that was changed	Emitted when toast visibility changes

`<BToastOrchestrator>`

View Source

<BToastOrchestrator> Properties

Adding styles: .toast‑orchestrator

Properties

Prop	Type	Default	Description
append-toast		`undefined`
teleport-disabled	`boolean`	`false`	Renders the Toaster in the exact place it was defined
teleport-to	`string \| RendererElement \| null \| undefined`	`'body'`	Overrides the default teleport location

Toast ​

Overview ​

Positioning ​

Static placement ​

Component Reference

<BToast>

Properties

Events

<BToastOrchestrator>

Properties

Toast

Overview

Positioning

Static placement

`<BToast>`

`<BToastOrchestrator>`