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

Prerequisites

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

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.

alert message in Vue.js

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>

alert message in Vue.js

Summary

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