main.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { createApp } from "vue"; import "./style.css"; import App from "./App.vue"; import ToastPlugin from 'vue-toast-notification'; // Import one of the available themes //import 'vue-toast-notification/dist/theme-default.css'; import 'vue-toast-notification/dist/theme-bootstrap.css'; const app = createApp(App); app.use(ToastPlugin); // Optional for default styles // Mount the app app.mount("#app"); |
App.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<template> <div id="app"> <h1>Vue Toast Notification Example</h1> <button @click="showSuccessToast">Show Success Toast</button> <button @click="showErrorToast">Show Error Toast</button> <button @click="clearAllToasts">Clear All Toasts</button> </div> </template> <script> import { useToast } from 'vue-toast-notification'; export default { setup() { const $toast = useToast(); // Show a success toast const showSuccessToast = () => { $toast.success('This is a success toast!', { position: 'top-right', duration: 5000, // Toast duration in milliseconds dismissible: true, // Allow users to manually dismiss the toast }); }; // Show an error toast const showErrorToast = () => { $toast.error('Something went wrong!', { position: 'bottom-left', duration: 3000, dismissible: true, }); }; // Clear all toasts const clearAllToasts = () => { $toast.clear(); }; return { showSuccessToast, showErrorToast, clearAllToasts }; }, }; </script> |
