In this guide, I'm going to show how to make toast notification in VueJS using vue-toasted. Here's the project's output:

Now let's follow these steps:

Table of Contents

1. Install Vue CLI and Create a Project
2. Install vue-toasted
3. Install Axios
4. Install Bootstrap & Create Form
5. Run the Project

Step 1 : Install Vue CLI and Create a Project

To install Vue CLI globally run this command:

# using npm:
npm install -g @vue/cli
# using yarn:
yarn global add @vue/cli

After installing Vue CLI, let's create a vue.js project using this command:

vue create vuenotification

Then navigate to your project directory:

cd vuenotification

Step 2 : Install vue-toasted

I'm going to install this package using NPM. Here's the command:

npm install vue-toasted --save

Open main.js from src folder and import vue-toasted like this:

import Toasted from 'vue-toasted'
Vue.use(Toasted, {
  duration: 9000,
  position: 'top-right',
  action : {
    text : 'Okay',
    onClick : (e, toastObject) => {
        toastObject.goAway(0);
    }
  }
})

To get more vue-toasted attributes, please see their official GitHub page.

Step 3 : Install Axios

Using Axios we will send POST request to the server like CURL. Let's install this:

npm install vue-axios axios --save

Import Axios like vue-toasted:

import VueAxios from 'vue-axios'
import axios from 'axios'
Vue.use(VueAxios, axios)

Step 4 : Install Bootstrap & Create Form

Install Bootstrap using this command:

npm install bootstrap --save

Import Bootstrap like vue-toasted:

// boostrap
import 'bootstrap/dist/css/bootstrap.css')

Let's create a simple form to add user. Go to src/componentsfolder and make a file called AddUser.vue. Then open the newly created file and paste the below code:

<template>
    <div class="container">
        <div class="card">
            <div class="card-body">
                <form @submit.prevent="addUser">
                    <div class="form-group">
                        <label>Name:</label>
                        <input type="text" class="form-control" v-model="user.name"/>
                    </div>
                    <div class="form-group">
                        <label>Age:</label>
                        <input type="text" class="form-control" v-model="user.age"/>
                    </div>
                    <div class="form-group">
                        <input type="submit" class="btn btn-info" value="Add User"/>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            user: {}
        }
    },
    methods: {
        addUser() {
            let uri = 'https://reqres.in/api/users';
            this.axios.post(uri, this.user).then((response) => {
                console.log(response.data);
                this.$toasted.show("User successfully added..!");
            });
        }
    }
}
</script>

In this file, we have created a simple form to add user. and we have sent the form data to the server via POST method using Axios.

I've tested using a dummy API called https://reqres.in. You can use your own API here.

We need to import AddUser.vue in App.vue file. Open src/App.vue file and import AddUser like this:

<template>
  <div id="app">
    <AddUser/>
  </div>
</template>

<script>
import AddUser from './components/AddUser.vue'

export default {
  name: 'app',
  components: {
    AddUser
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 30px;
}
</style>

Step 5 : Run the Project

So, the main.js file looks like:

import Vue from 'vue'
import App from './App.vue'

// boostrap
import 'bootstrap/dist/css/bootstrap.css'

// axios
import VueAxios from 'vue-axios'
import axios from 'axios'
Vue.use(VueAxios, axios)

// vue toasted
import Toasted from 'vue-toasted'
Vue.use(Toasted, {
  duration: 9000,
  position: 'top-right',
  action : {
    text : 'Okay',
    onClick : (e, toastObject) => {
        toastObject.goAway(0);
    }
  }
})

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Now run the project using the below command and see the output.

npm run serve

The tutorial is over. You can download this project from GitHub. Thank you.

---