Trigger clean, non-blocking toast notifications and await confirmation dialog decisions natively with a clean promise-based API.
Get up and running with @erag/vue-toastification in seconds. Check out the core code structures below to see how to initialize, notify, and await modal decisions.
import ToastPlugin from '@erag/vue-toastification'
import '@erag/vue-toastification/dist/style.css'
app.use(ToastPlugin, {
position: 'bottom-right'
})import { useToast } from '@erag/vue-toastification'
const { success, error } = useToast()
success('Changes saved!', 'Success')
error('Something went wrong.', 'Error')import { useModal } from '@erag/vue-toastification'
const modal = useModal()
const confirmed = await modal.confirm({
title: 'Delete Resource?',
message: 'This is permanent.',
type: 'danger'
})Unlike other heavy notification libraries, @erag/vue-toastification combines both non-blocking toasts and interactive promise-based modal dialogs in a single lightweight package with zero external dependencies and complete typescript integration.
When you trigger modal.confirm(), the library mounts a confirmation overlay and returns a native JS Promise. Clicking 'Confirm' resolves the promise to true, and clicking 'Cancel' resolves it to false. This allows you to write clean, linear async/await logic directly in your script setup.
Yes. You can specify a default global position (e.g. bottom-right, top-center) during plugin setup, and dynamically override it on individual triggers whenever you need specific alerts positioned differently.
All CSS layout selectors used by the package are strictly prefixed with erag-. This guarantees that importing the stylesheet won't override or affect standard styling variables in Tailwind, Bootstrap, or custom stylesheets.