![0josuZx.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516028995/vacpzgr5ngjdkfvixaas.png)
<a href="http://i.imgur.com/0josuZx.png">image-source</a>

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.
 <code>node -v</code>
![Screenshot_3.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516029936/qmdpmrs4x7tjoixpiuou.png)
and now we are ready to install the vue-toasted package. Open your command prompt  again.  you can use <code>--save</code> to save in your <b>package.json</b>
<code>npm install vue-toasted --save</code>
![Screenshot_4.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516030684/kqmo0tnqqvkjmyurqyvi.png)
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 <b>main.js</b>.
This is the main.js file structure.
<pre><code>
// 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: '<App/>'
})
</code>
</pre>
<code>import Toasted from 'vue-toasted'</code> : We can import the vue-toasted library in this way.
<br/><code>Vue.use(Toasted)</code> : This is how we tell vue.js to use the library globally

#### Implement in Project
<li><b>Make a button to trigger function</b></li>

After we have successfully installed and registerred it in <b>main.js</b>, 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 <b>app.vue</b> with structure like this.
``` html
<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. <code>< button @click="click()">Click Me!!< /button ></code>.  I have put a function called <b>click ( )</b>.
https://res.cloudinary.com/hpiynhbhq/image/upload/v1516158375/cengszajktienzbogmu8.png

<li><b>Make function in methods</b></li>
I will create a function to run the action toasted when the button is clicked
<pre><code>
 methods:{
    click(){
        this.$toasted.show("Toasted !!", { 
            theme: "primary", 
            position: "top-right", 
            duration : 5000
        });
    }
  }
</code>
</pre>
<code>this.$toasted.show("Toasted !!", { }) ;</code> : This is how to use toasted with <b>this</b> means accessing the toasted library that has been defined globally.
<br />
<code>theme: "primary"</code> : This is a way of giving a theme to our toasted background, there are 3 themes that are given toasted libraries is <b>themes</b>, <b>bubble</b>,<b>outline</b>.
<br />
<code>position: "top-right"</code>:This is how to set the position toasted. There are several options to set the position toasted is <b>top-left</b>,<b>top-center</b>,<b>top-right</b>,<b>bottom-left</b>,<b>bottom-center</b>,<b>bottom-right</b>
<br />
<code>duration : 5000</code> :This is the property to set how long you want to bring up toasted. units in the form of milli seconds.
<br />
<b>theme: "primary"</b>
https://res.cloudinary.com/hpiynhbhq/image/upload/v1516160647/yytjy27xb7pjzj4svlnd.png
<br />
<b>theme: "bubble"</b>
https://res.cloudinary.com/hpiynhbhq/image/upload/v1516160776/n3bqxo8eibr5hnipcjvr.png
<br />
<b>theme: "outline"</b>
https://res.cloudinary.com/hpiynhbhq/image/upload/v1516160815/wrte7vv4fqbi1mtqrmvk.png


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


<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@alfarisi94/how-to-add-toasted-in-our-web-app-with-vue-toasted">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>