Vue Toaster

Appearance

Getting Started ​

WARNING

This plugin only support Vue 3 since Vue 2 will reach End of Life (EOL) on December 31st, 2023.

Installation ​

Install @bastien-j/vue-toaster with your favorite package manager:

sh
$ npm install @bastien-j/vue-toaster
$ npm install @bastien-j/vue-toaster
sh
$ yarn add @bastien-j/vue-toaster
$ yarn add @bastien-j/vue-toaster

Initialize the plugin and pass it to your app instance:

js
import { createApp } from 'vue'
import { createToaster } from '@bastien-j/vue-toaster'
import '@bastien-j/vue-toaster/style.css' // Toaster styles
import App from './App.vue'

const toaster = createToaster()
const app = createApp(App)

app.use(toaster)
app.mount('#app')
import { createApp } from 'vue'
import { createToaster } from '@bastien-j/vue-toaster'
import '@bastien-j/vue-toaster/style.css' // Toaster styles
import App from './App.vue'

const toaster = createToaster()
const app = createApp(App)

app.use(toaster)
app.mount('#app')

TIP

Don't forget to import plugin styles.

Details

Once the plugin is loaded, the ToastContainer component will be globally registered.

Usage ​

The plugin support both Composition API and Option API (including usage in templates)

TIP

Composition API will be used in the rest of the documentation.

Composition API ​

Use the useToaster function:

vue
<script setup>
import { useToaster } from '@bastien-j/vue-toaster'

const toaster = useToaster()

function trigger() {
  toaster.info('Should work!')
}
</script>

<template>
  <button @click="trigger()">Trigger toast</button>
</template>
<script setup>
import { useToaster } from '@bastien-j/vue-toaster'

const toaster = useToaster()

function trigger() {
  toaster.info('Should work!')
}
</script>

<template>
  <button @click="trigger()">Trigger toast</button>
</template>

Option API / Template ​

Use the $toaster global property:

vue
<template>
  <button @click="$toaster.info('Should work!')">Trigger toast</button>
</template>
<template>
  <button @click="$toaster.info('Should work!')">Trigger toast</button>
</template>