---
title: "Vue Forms Toast & snackbar Example | Mobiscroll"
component: "Forms"
framework: "Vue"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/vue/forms/notifications"
---

# Toast & snackbar - Vue Forms demo

Vue notification examples of toast and snackbar with or w/o action. With undo, retry or custom functionality. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/forms/notifications)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/form-components/forms/notifications)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/form-components/forms/notifications)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/forms/notifications.md), [jQuery](https://demo.mobiscroll.com/jquery/forms/notifications.md), [Angular](https://demo.mobiscroll.com/angular/forms/notifications.md), [React](https://demo.mobiscroll.com/react/forms/notifications.md)

## Description

Use toast and snackbars to post updates to the users without interrupting them. These notifications can be top/bottom positioned and come in different colors.

## What this demo shows

- This demo shows Toast and Snackbar notifications for providing feedback and status updates without interrupting the user.
- **Placement** Notifications positioned at the top or bottom of the screen.
- **Preset styles** Primary, secondary, success, danger, warning, and info color options.
- **Toast** Lightweight, temporary messages that confirm an action has been completed.
- **Snackbar** Notifications displayed with or without an action button.
- **Snackbar actions** Custom action labels that execute application logic, such as retrying a failed operation.

## Best for

- **Save confirmations** Letting users know that their data was saved successfully.
- **Event creation feedback** Confirming that an event was created without interrupting the workflow.
- **Status updates** Communicating short, temporary updates while users continue their current task.
- **Recoverable errors** Providing a Snackbar action that lets users retry a failed operation.
- **Non-blocking feedback** Sharing information that does not require a modal dialog or immediate response.

## Tutorial

### Toast

Top or bottom, in a number of preset colors, use the toast to inform users. Perfect for feedback on data save, event creation and much more.

```vue
<template>
  <MbscToast
    message="Message sent"
  />

  <MbscToast
    message="Message sent"
    display="top"
  />

  <MbscToast
    message="Message sent"
    color="primary"
  />

  <MbscToast
    message="Message sent"
    color="secondary"
  />

  <MbscToast
    message="Message sent"
    color="success"
  />

  <MbscToast
    message="Message sent"
    color="danger"
  />

  <MbscToast
    message="Message sent"
    color="warning"
  />

  <MbscToast
    message="Message sent"
    color="info"
  />
</template>
```

### Snackbar

The snackbar can be rendered with or without and action. Actions can have custom labels and when clicked can call any custom code.

```vue
<script setup>
const isActionToastOpen = ref(false)

const actionButton = {
  text: 'Retry',
  action: () => {
    isActionToastOpen.value = true
  }
}
</script>

<template>
  <MbscSnackbar
    message="Your draft has been discarded"
  />
  <MbscSnackbar
    message="Your draft has been discarded"
    display="top"
  />
  <MbscSnackbar
    message="Connection timed out. Showing limited messages."
    :button="actionButton"
    :isOpen="isActionSnackbarOpen"
    @close="isActionSnackbarOpen = false"
  />
  <MbscToast
    message="Retrying..."
    :isOpen="isActionToastOpen"
    @close="isActionToastOpen = false"
  />
  <MbscSnackbar
    message="Your draft has been discarded"
    color="primary"
  />
  <MbscSnackbar
    message="Your draft has been discarded"
    color="secondary"
  />
  <MbscSnackbar
    message="Your draft has been discarded"
    color="success"
  />
  <MbscSnackbar
    message="Your draft has been discarded"
    color="danger"
  />
  <MbscSnackbar
    message="Your draft has been discarded"
    color="warning"
  />
  <MbscSnackbar
    message="Your draft has been discarded"
    color="info"
</template>
```

## Code

### SFC JS

```vue
<script setup>
import {
  MbscButton,
  MbscPage,
  MbscSnackbar,
  MbscToast,
  setOptions
} from '@mobiscroll/vue'
import { ref } from 'vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const isBottomToastOpen = ref(false)
const isTopToastOpen = ref(false)
const isPrimaryToastOpen = ref(false)
const isSecondaryToastOpen = ref(false)
const isSuccessToastOpen = ref(false)
const isDangerToastOpen = ref(false)
const isWarningToastOpen = ref(false)
const isInfoToastOpen = ref(false)

const isBottomSnackbarOpen = ref(false)
const isTopSnackbarOpen = ref(false)
const isActionSnackbarOpen = ref(false)
const isActionToastOpen = ref(false)
const isPrimarySnackbarOpen = ref(false)
const isSecondarySnackbarOpen = ref(false)
const isSuccessSnackbarOpen = ref(false)
const isDangerSnackbarOpen = ref(false)
const isWarningSnackbarOpen = ref(false)
const isInfoSnackbarOpen = ref(false)

const actionButton = {
  text: 'Retry',
  action: () => {
    isActionToastOpen.value = true
  }
}
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Toast</div>
      <div class="mbsc-button-group-block">
        <MbscToast
          message="Message sent"
          :isOpen="isBottomToastOpen"
          @close="isBottomToastOpen = false"
        />
        <MbscToast
          message="Message sent"
          display="top"
          :isOpen="isTopToastOpen"
          @close="isTopToastOpen = false"
        />
        <MbscToast
          message="Message sent"
          color="primary"
          :isOpen="isPrimaryToastOpen"
          @close="isPrimaryToastOpen = false"
        />
        <MbscToast
          message="Message sent"
          color="secondary"
          :isOpen="isSecondaryToastOpen"
          @close="isSecondaryToastOpen = false"
        />
        <MbscToast
          message="Message sent"
          color="success"
          :isOpen="isSuccessToastOpen"
          @close="isSuccessToastOpen = false"
        />
        <MbscToast
          message="Message sent"
          color="danger"
          :isOpen="isDangerToastOpen"
          @close="isDangerToastOpen = false"
        />
        <MbscToast
          message="Message sent"
          color="warning"
          :isOpen="isWarningToastOpen"
          @close="isWarningToastOpen = false"
        />
        <MbscToast
          message="Message sent"
          color="info"
          :isOpen="isInfoToastOpen"
          @close="isInfoToastOpen = false"
        />
        <MbscButton @click="isBottomToastOpen = true">Bottom toast</MbscButton>
        <MbscButton @click="isTopToastOpen = true">Top toast</MbscButton>
        <MbscButton @click="isPrimaryToastOpen = true">Primary toast</MbscButton>
        <MbscButton @click="isSecondaryToastOpen = true">Secondary toast</MbscButton>
        <MbscButton @click="isSuccessToastOpen = true">Success toast</MbscButton>
        <MbscButton @click="isDangerToastOpen = true">Danger toast</MbscButton>
        <MbscButton @click="isWarningToastOpen = true">Warning toast</MbscButton>
        <MbscButton @click="isInfoToastOpen = true">Info toast</MbscButton>
      </div>
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Snackbar</div>
      <div class="mbsc-button-group-block">
        <MbscSnackbar
          message="Your draft has been discarded"
          :isOpen="isBottomSnackbarOpen"
          @close="isBottomSnackbarOpen = false"
        />
        <MbscSnackbar
          message="Your draft has been discarded"
          display="top"
          :isOpen="isTopSnackbarOpen"
          @close="isTopSnackbarOpen = false"
        />
        <MbscSnackbar
          message="Connection timed out. Showing limited messages."
          :button="actionButton"
          :isOpen="isActionSnackbarOpen"
          @close="isActionSnackbarOpen = false"
        />
        <MbscToast
          message="Retrying..."
          :isOpen="isActionToastOpen"
          @close="isActionToastOpen = false"
        />
        <MbscSnackbar
          message="Your draft has been discarded"
          color="primary"
          :isOpen="isPrimarySnackbarOpen"
          @close="isPrimarySnackbarOpen = false"
        />
        <MbscSnackbar
          message="Your draft has been discarded"
          color="secondary"
          :isOpen="isSecondarySnackbarOpen"
          @close="isSecondarySnackbarOpen = false"
        />
        <MbscSnackbar
          message="Your draft has been discarded"
          color="success"
          :isOpen="isSuccessSnackbarOpen"
          @close="isSuccessSnackbarOpen = false"
        />
        <MbscSnackbar
          message="Your draft has been discarded"
          color="danger"
          :isOpen="isDangerSnackbarOpen"
          @close="isDangerSnackbarOpen = false"
        />
        <MbscSnackbar
          message="Your draft has been discarded"
          color="warning"
          :isOpen="isWarningSnackbarOpen"
          @close="isWarningSnackbarOpen = false"
        />
        <MbscSnackbar
          message="Your draft has been discarded"
          color="info"
          :isOpen="isInfoSnackbarOpen"
          @close="isInfoSnackbarOpen = false"
        />
        <MbscButton @click="isBottomSnackbarOpen = true">Bottom snackbar</MbscButton>
        <MbscButton @click="isTopSnackbarOpen = true">Top snackbar</MbscButton>
        <MbscButton @click="isActionSnackbarOpen = true">Snackbar with action</MbscButton>
        <MbscButton @click="isPrimarySnackbarOpen = true">Primary snackbar</MbscButton>
        <MbscButton @click="isSecondarySnackbarOpen = true">Secondary snackbar</MbscButton>
        <MbscButton @click="isSuccessSnackbarOpen = true">Success snackbar</MbscButton>
        <MbscButton @click="isDangerSnackbarOpen = true">Danger snackbar</MbscButton>
        <MbscButton @click="isWarningSnackbarOpen = true">Warning snackbar</MbscButton>
        <MbscButton @click="isInfoSnackbarOpen = true">Info snackbar</MbscButton>
      </div>
    </div>
  </MbscPage>
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import {
  MbscButton,
  MbscPage,
  MbscSnackbar,
  MbscToast,
  setOptions
} from '@mobiscroll/vue'
import { ref } from 'vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const isBottomToastOpen = ref<boolean>(false)
const isTopToastOpen = ref<boolean>(false)
const isPrimaryToastOpen = ref<boolean>(false)
const isSecondaryToastOpen = ref<boolean>(false)
const isSuccessToastOpen = ref<boolean>(false)
const isDangerToastOpen = ref<boolean>(false)
const isWarningToastOpen = ref<boolean>(false)
const isInfoToastOpen = ref<boolean>(false)

const isBottomSnackbarOpen = ref<boolean>(false)
const isTopSnackbarOpen = ref<boolean>(false)
const isActionSnackbarOpen = ref<boolean>(false)
const isActionToastOpen = ref<boolean>(false)
const isPrimarySnackbarOpen = ref<boolean>(false)
const isSecondarySnackbarOpen = ref<boolean>(false)
const isSuccessSnackbarOpen = ref<boolean>(false)
const isDangerSnackbarOpen = ref<boolean>(false)
const isWarningSnackbarOpen = ref<boolean>(false)
const isInfoSnackbarOpen = ref<boolean>(false)

const actionButton = {
  text: 'Retry',
  action: () => {
    isActionToastOpen.value = true
  }
}
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Toast</div>
      <div class="mbsc-button-group-block">
        <MbscToast
          message="Message sent"
          :isOpen="isBottomToastOpen"
          @close="isBottomToastOpen = false"
        />
        <MbscToast
          message="Message sent"
          display="top"
          :isOpen="isTopToastOpen"
          @close="isTopToastOpen = false"
        />
        <MbscToast
          message="Message sent"
          color="primary"
          :isOpen="isPrimaryToastOpen"
          @close="isPrimaryToastOpen = false"
        />
        <MbscToast
          message="Message sent"
          color="secondary"
          :isOpen="isSecondaryToastOpen"
          @close="isSecondaryToastOpen = false"
        />
        <MbscToast
          message="Message sent"
          color="success"
          :isOpen="isSuccessToastOpen"
          @close="isSuccessToastOpen = false"
        />
        <MbscToast
          message="Message sent"
          color="danger"
          :isOpen="isDangerToastOpen"
          @close="isDangerToastOpen = false"
        />
        <MbscToast
          message="Message sent"
          color="warning"
          :isOpen="isWarningToastOpen"
          @close="isWarningToastOpen = false"
        />
        <MbscToast
          message="Message sent"
          color="info"
          :isOpen="isInfoToastOpen"
          @close="isInfoToastOpen = false"
        />
        <MbscButton @click="isBottomToastOpen = true">Bottom toast</MbscButton>
        <MbscButton @click="isTopToastOpen = true">Top toast</MbscButton>
        <MbscButton @click="isPrimaryToastOpen = true">Primary toast</MbscButton>
        <MbscButton @click="isSecondaryToastOpen = true">Secondary toast</MbscButton>
        <MbscButton @click="isSuccessToastOpen = true">Success toast</MbscButton>
        <MbscButton @click="isDangerToastOpen = true">Danger toast</MbscButton>
        <MbscButton @click="isWarningToastOpen = true">Warning toast</MbscButton>
        <MbscButton @click="isInfoToastOpen = true">Info toast</MbscButton>
      </div>
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Snackbar</div>
      <div class="mbsc-button-group-block">
        <MbscSnackbar
          message="Your draft has been discarded"
          :isOpen="isBottomSnackbarOpen"
          @close="isBottomSnackbarOpen = false"
        />
        <MbscSnackbar
          message="Your draft has been discarded"
          display="top"
          :isOpen="isTopSnackbarOpen"
          @close="isTopSnackbarOpen = false"
        />
        <MbscSnackbar
          message="Connection timed out. Showing limited messages."
          :button="actionButton"
          :isOpen="isActionSnackbarOpen"
          @close="isActionSnackbarOpen = false"
        />
        <MbscToast
          message="Retrying..."
          :isOpen="isActionToastOpen"
          @close="isActionToastOpen = false"
        />
        <MbscSnackbar
          message="Your draft has been discarded"
          color="primary"
          :isOpen="isPrimarySnackbarOpen"
          @close="isPrimarySnackbarOpen = false"
        />
        <MbscSnackbar
          message="Your draft has been discarded"
          color="secondary"
          :isOpen="isSecondarySnackbarOpen"
          @close="isSecondarySnackbarOpen = false"
        />
        <MbscSnackbar
          message="Your draft has been discarded"
          color="success"
          :isOpen="isSuccessSnackbarOpen"
          @close="isSuccessSnackbarOpen = false"
        />
        <MbscSnackbar
          message="Your draft has been discarded"
          color="danger"
          :isOpen="isDangerSnackbarOpen"
          @close="isDangerSnackbarOpen = false"
        />
        <MbscSnackbar
          message="Your draft has been discarded"
          color="warning"
          :isOpen="isWarningSnackbarOpen"
          @close="isWarningSnackbarOpen = false"
        />
        <MbscSnackbar
          message="Your draft has been discarded"
          color="info"
          :isOpen="isInfoSnackbarOpen"
          @close="isInfoSnackbarOpen = false"
        />
        <MbscButton @click="isBottomSnackbarOpen = true">Bottom snackbar</MbscButton>
        <MbscButton @click="isTopSnackbarOpen = true">Top snackbar</MbscButton>
        <MbscButton @click="isActionSnackbarOpen = true">Snackbar with action</MbscButton>
        <MbscButton @click="isPrimarySnackbarOpen = true">Primary snackbar</MbscButton>
        <MbscButton @click="isSecondarySnackbarOpen = true">Secondary snackbar</MbscButton>
        <MbscButton @click="isSuccessSnackbarOpen = true">Success snackbar</MbscButton>
        <MbscButton @click="isDangerSnackbarOpen = true">Danger snackbar</MbscButton>
        <MbscButton @click="isWarningSnackbarOpen = true">Warning snackbar</MbscButton>
        <MbscButton @click="isInfoSnackbarOpen = true">Info snackbar</MbscButton>
      </div>
    </div>
  </MbscPage>
</template>
```

## Implementation notes

- `message` sets the notification text for both `toast` and `snackbar`.
- `color` sets a preset color for either notification type: `primary`, `secondary`, `success`, `danger`, `warning`, `info`. Omitting it renders the default (neutral) style.
- `display: 'top'` positions the notification at the top of its container; omitting `display` defaults to bottom placement.
- `context` scopes the notification to render inside a given container element/selector instead of the document body - used in the demo to keep each notification confined to the demo panel.
- A snackbar action button is added with `button: { text: string, action: () => void }`; `text` labels the button and `action` runs on click (the demo's action re-triggers a `toast` call to confirm the retry).
- Framework invocation differs by framework: JS/jQuery call the global `mobiscroll.toast({...})` / `mobiscroll.snackbar({...})` functions imperatively from a click handler; Angular injects the `Notifications` service and calls `this.notify.toast({...})` / `this.notify.snackbar({...})`; React and Vue instead render declarative `<Toast>`/`<Snackbar>` components (`MbscToast`/`MbscSnackbar` in Vue) with a boolean `isOpen` prop (`:isOpen` in Vue) held in state and set to `true` to show the notification, and an `onClose`/`@close` callback that resets that state when the notification dismisses itself.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-vue.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config vue
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config vue --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/vue/getting-started/installation

## Related demos

- Previous: [Alert, confirm & prompt](https://demo.mobiscroll.com/vue/forms/alert-confirm-prompt.md) - Vue alert, confirm and prompt dialogs for giving feedback to users and for quick & focused data entry.