Features

• 🔥 Hot by default
• 🔩 Easily Customizable
• ⏳ Promise API - Automatic loader from a promise
• 🕊 Lightweight - less than 3.6kb including styles
• ✅ Accessible
• 🤯 Headless Hooks - Create your own with useToaster()

Installation

With pnpm

pnpm add @spaneco/vue-hot-toast

With NPM

npm install @spaneco/vue-hot-toast

Getting Started

Add the Toaster to your app first. It will take care of rendering all notifications emitted. Now you can trigger toast() from anywhere!

<script setup lang="ts">
    import { toast, Toaster } from '@spaneco/vue-hot-toast'
    import '@spaneco/vue-hot-toast/dist/vue-hot-toast.css'

    toast('Here is your toast.');
</script>

<template>
  <Toaster position="top-left"/>
</template>

Documentation

Find the full API reference on official documentation.