This tutorial I want to share a library that is good enough for you who want to use some kind of notification on your website, especially those using Vue.js . I will share how to implement it in our web application. for more details just go ahead.
What Will I Learn?
- Install Package with NPM
- Register Library in Vue
- Implement Toasted
Requirements
- Install Node js
- Install Vue-cli
- Basic Javascript es6
Difficulty
- Basic
Tutorial Contents
Install Package with NPM
Before we install the package from NPM, make sure your computer has installed js node. to check the version of your js node. please open a command prompt and type this code.
node -v
and now we are ready to install the vue-toasted package. Open your command prompt again. you can use --save to save in your package.json
npm install vue-toasted --save
If no error occurs then the installation process has been successful.
Register Library in Vue
And now the next step after we install the library, then we must register it first in main.js.
This is the main.js file structure.
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Toasted from 'vue-toasted'
Vue.use(Toasted)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: ''
})
import Toasted from 'vue-toasted' : We can import the vue-toasted library in this way.
Vue.use(Toasted) : This is how we tell vue.js to use the library globally
Implement in Project
After we have successfully installed and registerred it in main.js, now I want to use it in component. how to use it and how to trigerred . let's we see the example. I have one component that is app.vue with structure like this.
<template>
<div id="app">
<img src="./assets/logo.png">
<button @click="click()">Click Me!!</button>
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
click(){
this.$toasted.show("Toasted !!", {
theme: "primary",
position: "top-right",
duration : 5000
});
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
I have one button that I will use trigger click to run its toast. < button @click="click()">Click Me!!< /button >. I have put a function called click ( ).
methods:{
click(){
this.$toasted.show("Toasted !!", {
theme: "primary",
position: "top-right",
duration : 5000
});
}
}
this.$toasted.show("Toasted !!", { }) ; : This is how to use toasted with this means accessing the toasted library that has been defined globally.
theme: "primary" : This is a way of giving a theme to our toasted background, there are 3 themes that are given toasted libraries is themes, bubble,outline.
position: "top-right":This is how to set the position toasted. There are several options to set the position toasted is top-left,top-center,top-right,bottom-left,bottom-center,bottom-right
duration : 5000 :This is the property to set how long you want to bring up toasted. units in the form of milli seconds.
theme: "primary"
theme: "bubble"
theme: "outline"
We're done, we've successfully implemented vue-toasted on our web app, and have linked it with a function we created, and we succeeded in changing the theme. quite a lot of me thank you for reading this tutorial hopefully useful for you
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Congratulations @alfarisi94! You have completed some achievement on Steemit and have been rewarded with new badge(s) :
Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here
If you no longer want to receive notifications, reply to this comment with the word
STOPHey @alfarisi94 I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x