Contents
Description:
A fully customizable, light weight and easy to use toast notification in Vue.js with option to show the progress bar to the user and display remaining time.
Features:
Super easy to setupSwipe to closeSupport for Composition APIWritten in typescript, full typescript supportSuper light weightDefine behavior per toastFun progress bar to display remaining time
You might be interested in:
A Beautiful Notification Library For Vue.js 3Create Notification Bell For Vue.js Application with vue-notification-bell
How to use it?
1. Install the toast notification component with npm or yarn.
#npm
npm install mosha-vue-toastify
#yarn
yarn add mosha-vue-toastify
2. Import the required component in your file.
import { defineComponent } from ‘vue’
// import the library
import { createToast } from ‘mosha-vue-toastify’;
// import the styling for the toast
import ‘mosha-vue-toastify/dist/style.css’
3. Then, create the the template for toast notification:
<template>
<button @click=”toast”>Toast it!</button>
</template>
4. The Vue.js code that will do the rest.
export default defineComponent({
name: ‘HelloWorld’,
setup () {
const toast = () => {
createToast(‘Wow, easy’)
}
return { toast }
}
})
The post A light-weight and easy to use toast notification in Vue.js – mosha-vue-toastify appeared first on Lipku.com.
Permanent link to this post here
