How to Show Alert Messages using Toast Notification in Vue 3

Last updated on: September 17, 2023 by Digamber

In this tutorial, I will share how to create toast notification component in Vue 3 using the Vue toast notification library.

Not only but also, we will throw light on how to display alert popup messages, how to show error messages using vue toast notification in Vue application.

Toast notifications are almost similar to a popup message. These notifications are showed to site visitors when it comes to display critical information.

A toast notification is a non-intrusive, transient message that appears briefly on the screen to provide users with information, feedback, or alerts.

It is not limited to any extent, however it can also be appear at the bottom or top of the screen and then disappears after a short period of time.

Toast notifications are majorly used in web and mobile applications to notify users regarding an event, toast notification help communicate about successful actions, errors, or other important events.

Vue 3 Popup Alert Message or Toast Notification Example

Step 1: Build New Vue Project
Step 2: Install Notification Package
Step 3: Add Package CSS
Step 4: Create New File
Step 5: Show Popup Notification
Step 6: Update App File
Step 7: Run Development Server

Build New Vue Project

Vue CLI is a must have tool for front-end development in Vue. You can install the tool using the below command.

npm install -g @vue/cli

Once the Vue CLI is installed, use the another command to install the fresh and a new version of Vue framework.

vue create vue-demo-app

Move into the project directory:

cd vue-demo-app

Head over to vue.config.js fil, add the following code. It fixes the multi-word error warning in relation to component naming convention.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
})

Node.js Gatsby error – “digital envelope routines::unsupported …”

Error: digital envelope routines::unsupported
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'

Update the given code under the "scripts": [] array in package.json file.

"scripts": {
    "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
},

Install Vue Toast Notification Package

In this step, you have to add the imperative library to display alert popup messages in vue.

We can use the console to install the vue-toast-notification package.

npm install vue-toast-notification@^3.0

Add Package CSS

Now, we have to register the Bootstrap and toast notification CSS CDN URLs within the public/index.html file:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <!-- Add lib CSS Below -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/vue-toast-notification@3/dist/theme-sugar.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

The plugin is ready to be used only after you register it inside the main.js file:

import { createApp, h } from "vue";
import App from "./App.vue";
import VueToast from "vue-toast-notification";
const app = createApp({
  render: () => h(App),
});
app.use(VueToast);
app.mount("#app");

Create New File

We have to create a brand new reusable component, below is the code that you need to add inside the components/Profile.vue file:

<template>
    <div>
        
    </div>
</template>
<script>
export default {
    data() {
        return {
        }
    }
}
</script>

Show Popup Notification

You have to insert the entire given code in the components/Profile.vue file:

<template>
    <div class="text-center">
        <h2 class="mb-4 text-center">Vue Toast Alert Notification Examples</h2>
        <button class="btn btn-primary me-3" @click="open">
            Show Notification
        </button>
        <button class="btn btn-danger me-3" @click="error">
            Show Error
        </button>
        <button class="btn btn-warning me-3" @click="warning">
            Show Warning
        </button>
    </div>
</template>
  
<script>
export default {
    methods: {
        open() {
            this.$toast.open({
                message: "Good Morning! User",
                type: "success",
                duration: 1000 * 10,
                dismissible: true
            })
        },
        error() {
            this.$toast.error("Your have got the error.", {
                type: "error",
                duration: 1000 * 10,
                dismissible: true,
                position: 'top-right',
            })
        },
        warning() {
            this.$toast.warning("Account renewal date is near.", {
                type: "warning",
                duration: 1000 * 10,
                dismissible: true,
                position: 'bottom-left',
            })
        },
    }
};
</script>

Update App File

In Vue, the App.vue file is the common component that represents the root of the application’s user interface. In this step, we will register our reusable component in Vue’s main componenet.

Hence, add the below code in App.vue file:

<template>
  <div class="container mt-5">
    <Profile />
  </div>
</template>
<script>
import Profile from './components/Profile.vue';
export default {
  components: {
    Profile
  }
}
</script>

Run Development Server

Finally, we are ready to start the development server, below is the command that compiles your vue app and run the server.

npm run serve

Here is the URL that can allow you to view the new app on the browser:

http://localhost:8080

How to Show Alert Messages using Toast Notification in Vue

Conclusion

In this step-by-step guide, we have learned how to show popup alert messages in Vue application using vue-toast-notification library.

I had used this library before in one of my project, and decided to share with Vue community. How it should be used in Vue environment to show alert or toast notifications.

However, there are other popular libraries available online for integrating or showing toast notifications in Vue.

Hope you love this guide and share with others.

Digamber

A Full-stack developer with a passion to solve real world problems through functional programming.