How To Display Alert Message In Vue.js

In this article, I will guide you with the process of adding an alert message in Vue.js

Prerequisites 

• Familiarity with the HTML ,JavaScript and Bootstrap 
• node.js installed
• Tailwind CSS

          You can check how to install Tailwind CSS  in vue.js from the below link

• How To Add Tailwind CSS n Vue.js

Create Vue.js Project

To create a Vue.js app, use the following command in the terminal

vue create vuealertmsg

Install daisyUI

Install daisyUI using the following npm command

npm i daisyui

Open tailwind.config.js and add the following code.

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
}

Now right-click on the components folder and add a new component named 'alertdemo.vue'. Now open alertdemo.vue component and add the following code.

<template>
    <div class="container" style="margin: 27px;">
        <div class="alert alert-info shadow-lg" style="margin-bottom: 27px;" >
            <div >
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    class="stroke-current flex-shrink-0 w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>New software update available.</span>
            </div>
        </div>
        <div class="alert alert-warning shadow-lg">
            <div>
                <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none"
                    viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
                <span>Warning: Invalid email address!</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Alertdemo',
    props: {
        msg: String
    }
}
</script>
<style scoped>
h3 {
    margin: 40px 0 0;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: inline-block;
    margin: 0 10px;
}

a {
    color: #42b983;
}
</style>

Now open App.vue component. Add the following code in App.vue component.

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

<script>
import Alertdemo from './components/alertdemo.vue'

export default {
  name: 'App',
  components: {
    Alertdemo
  }
}

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

Now run the application by using the following command.

Add the following code in alertdemo.vue component.

<template>
    <div class="container" style="margin: 27px;">
        <div class="alert shadow-lg">
            <div>
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    class="stroke-info flex-shrink-0 w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>12 unread messages. Tap to see.</span>
            </div>
        </div>
        <div class="alert shadow-lg" style="margin-top:20px">
            <div>
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    class="stroke-info flex-shrink-0 w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>we use cookies for no reason.</span>
            </div>
            <div class="flex-none">
                <button class="btn btn-sm btn-ghost">Deny</button>
                <button class="btn btn-sm btn-primary">Accept</button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Alertdemo',
    props: {
        msg: String
    }
}
</script>
<style scoped>
h3 {
    margin: 40px 0 0;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: inline-block;
    margin: 0 10px;
}

a {
    color: #42b983;
}
</style>

Summary

 In this article, we learned how to add an alert message in Vue.js