Vue
Vue Quick Start
Install Toastflow in Vue and show your first toast.
Use vue-toastflow when you have a normal Vue app entry file.
Install
pnpm add vue-toastflow
npm install vue-toastflow
yarn add vue-toastflow
Register the plugin
main.ts
import { createApp } from "vue";
import App from "./App.vue";
import { createToastflow } from "vue-toastflow";
createApp(App).use(createToastflow()).mount("#app");
Render one container
App.vue
<script setup lang="ts">
import { ToastContainer } from "vue-toastflow";
</script>
<template>
<ToastContainer />
<RouterView />
</template>
Fire a toast
save.ts
import { toast } from "vue-toastflow";
toast.success({
title: "Saved",
description: "Your changes are live.",
});
toast.* needs the plugin-created store. Install createToastflow() before calling toasts from stores, services, or composables.Minimal File Tree
src/main.ts
import { createApp } from "vue";
import App from "./App.vue";
import { createToastflow } from "vue-toastflow";
createApp(App).use(createToastflow()).mount("#app");