Vue Smart Toast

A Vue 3 toast library with a Sonner-style desktop experience and a lightweight Vant-style mobile experience behind one command API.

Install

pnpm add vue-smart-toast

Usage

Import the style once and render <Toaster /> near the root of your app.

<script setup lang="ts">
import { Toaster, toast } from 'vue-smart-toast'
import 'vue-smart-toast/style.css'
</script>

<template>
  <Toaster />
  <button @click="toast.success('Saved')">Show toast</button>
</template>

API

toast('Message')
toast.success('Saved')
toast.error('Failed')
toast.info('Sync started')
toast.warning('Storage is almost full')
toast.dismiss(id)
toast.clear()

Promise toasts update from loading to success or error:

toast.promise(save(), {
  loading: 'Saving...',
  success: 'Saved',
  error: 'Save failed',
})

Desktop And Mobile

By default, device: 'auto' chooses the mobile toast on small or touch-first viewports and the desktop toast elsewhere. You can force either surface per toast.

toast.success('Desktop toast', { device: 'pc' })
toast.success('Mobile toast', { device: 'mobile' })

Toaster Options

Desktop options follow the Vue Sonner-style model.

<Toaster
  position="top-right"
  theme="light"
  rich-colors
  close-button
  :toast-options="{
    class: 'my-toast',
    style: { background: 'white' },
    classes: {
      toast: 'toast-root',
      title: 'toast-title',
      description: 'toast-description',
      icon: 'toast-icon',
    },
  }"
/>

Mobile toasts have separate options so you can keep a different visual language.

<Toaster
  :mobile-toast-options="{
    class: 'mobile-toast',
    classes: {
      toast: 'mobile-toast-root',
      text: 'mobile-toast-text',
      icon: 'mobile-toast-icon',
    },
  }"
/>

Icons

Use slots to replace default icons globally.

<Toaster>
  <template #success-icon>
    <SuccessIcon />
  </template>

  <template #mobile-success-icon>
    <MobileSuccessIcon />
  </template>
</Toaster>

Override or hide an icon for a single toast.

toast.success('Saved', { icon: SuccessIcon })
toast.success('Saved', { icon: false })
toast.success('Saved', { device: 'mobile', mobileIcon: MobileSuccessIcon })

Plugin

The default export registers the global <Toaster /> component and $toast.

import { createApp } from 'vue'
import VueSmartToast from 'vue-smart-toast'
import 'vue-smart-toast/style.css'

createApp(App).use(VueSmartToast).mount('#app')

License

MIT