In this article, we are going to understand the process for the integration of sample toast in the VueJS 3.0 application using the 'vue-dk-toast' plugin.
Create A Sample VueJS 3.0 App:
The toast plugin we are integrating needs to be integrated into the VueJS application of version 3.0.
Command To Install Vue CLI Globally On Your System:
npm run -g @vue/cli
Command To Create Vue App:
vue create your_application_name
After creating a sample application run the following command to start the application.
Command To Run Vue App:
npm run serve
Install vue-dk-toast NPM Package:
Command To Install Toast Package:
npm i vue-dk-toast
After installation package reference will be added to the package.json
Import Toast Globally:
Now we need to import the Toast component, by configuring in main.js(entry file), it makes a toast available for the entire VueJS 3.0 application.
src/main.js:
import { createApp } from 'vue' import App from './App.vue' import DKToast from 'vue-dk-toast' createApp(App) .use(DKToast) .mount('#app')
- (Line: 3) Imported 'DKToast' from 'vue-dk-toast' plugin
- (Line: 6) Configured 'DKToast' in VueJS instance like a middleware, so that DKToast will be accessed throughout the application.
Basic Toast Message:
To access the toast in the Vue component, we can use 'this' scope like 'this.$toast('your_messge',{})'. The '$toast()' method accepts parameters like the first parameter as a message to display on the toast popup and a second parameter is a javascript object literal as the configuration setup for the toast.
The second parameter javascript object literal is an optional parameter, if we don't define explicitly all default configurations will be applied automatically to the toast.
Now let's implement a simple toast as follow.
src/components/HelloWorld.vue:
<template> <div> <button type="button" @click="openToast()">Open Toast</button> </div> </template> <script> export default { name: 'HelloWorld', methods:{ openToast(){ this.$toast('Hello !') } } } </script>
- (Line: 3) Button added to invoke the Toast.
- (Line: 12) The '$toast()' method configured with simple message to display.
Duration Property:
We can configure the duration time property to display the toast. Using the 'duration' property we can specify the number of seconds toast needs to be displayed.
src/components/HelloWorld.vue:(Script Part)
methods:{ openToast(){ this.$toast('Hello !',{ duration: 5000 }) } }
- The 'duration' property set to '5000' seconds in the above sample.
Styles Property:
The 'style' property is to add the styles to the toast popup. We can configure all different styles using this property to the toast popup.
src/components/HelloWorld.vue:(Script Part)
openToast(){ this.$toast('Hello !',{ duration: 5000, styles:{ color:'red' } }) }
Slot Property:
The 'slot' property accepts Html content like adding icons or special Html content.
src/components/HelloWorld.vue:
openToast(){ this.$toast('Hello !',{ duration: 5000, styles:{ color:'red' }, slot:'<h1>Hi</h1>' }) }
- The 'slot' property accepting Html content as the input value.
PositionX and PositionY Properties:
The 'positionX' property defines x-axis position like 'Left' or 'Right'. The 'positionY' property defines a y-axis position like 'Top' or 'Bottom'. But the 'positionX', 'positionY' properties currently not supported by the 'this.$toast()' method. So to set up the position of toast, we need to be configured at a global level like main.js, but configuring the global level means it will be applied all over the application.
src/main.js:
import { createApp } from 'vue' import App from './App.vue' import DKToast from 'vue-dk-toast' createApp(App) .use(DKToast,{ positionX:'left', positionY: 'top' }) .mount('#app')That's all about the 'vue-dk-toast' plugin with a simple configuration setup.
Support Me!
Buy Me A Coffee
PayPal Me
Wrapping Up:
Hopefully, I think this article delivered some useful information on the vue-dk-toast plugin to integrate into the VueJs application. I love to have your feedback, suggestions, and better techniques in the comment section below.
Comments
Post a Comment