Vue 3 Flowbite Alert UI Component with Tailwind Tutorial

Last Updated on by in Vue JS

In this tutorial, we will teach you how to create a contextual alert UI component in Vue js application using Flowbite package and Tailwind CSS.

In the previous guide, we have learned how to create accordion component using Vue 3, similarly we are going to get the knowledge of adding Flowbite Alert box in Vue.

An alert component is used to show contextual information that informs the site visitors about the important information related to any topic.

This UI component is really helpful to make the communication between users and the system. We will learn in this guide how to build simple alert box to show notification in Vue.

For instance, information prompts, warning notifications, success and error notifications.

Alert box not just grabs users attention but also ads the positiveness to the user experience.

We have created a series of steps, that will help us to implement the various types of alert boxes in Vue component.

How to Create Alert Component in Vue 3 using Tailwind and Flowbite

  • Step 1: Install Vue Framework
  • Step 2: Install Flowbite Package
  • Step 3: Add Tailwind in Vue
  • Step 4: Create Component File
  • Step 5: Integrate Alert Component
  • Step 6: Update App Template
  • Step 7: Start Development Server

Install Vue Framework

Vue CLI is the important tool that you need to install in the first step.

npm install -g @vue/cli

We are now ready to install a new Vue application, execute the given command.

vue create vue-demo-app

Choose the Vue 3 option from the Vue CLI options list.

Move into the Vue project folder:

cd vue-demo-app

Install Flowbite Package

Now, you have to open the console, type the following command and hit enter to install the Flowbite library.

 npm install flowbite flowbite-vue --legacy-peer-deps

Add Tailwind in Vue

In order to integrate Tailwind CSS in Vue, make sure to head over to public/index.html file, and define the below script and CSS URLs under the head section.

<!doctype html>
<html>
<head>
  ...
  ...

  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d',
          }
        }
      }
    }
  </script>
</head>
<body>
   
</body>
</html>

Create Component File

In the next step, we will create a basic AlertComp.vue file inside the components/ folder.

The following code creates a basic component in Vue.

<template>
    <div>
        
    </div>
</template>

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

Integrate Alert Component

Put the following code in the components/AlertComp.vue file:

<script setup>
import { Alert } from 'flowbite-vue'
</script>

<template>
    <div class="flex flex-col">
        <Alert type="info" class="mb-2">Info</Alert>
        <Alert type="warning" class="mb-2">Warning</Alert>
        <Alert type="danger" class="mb-2">Danger</Alert>
        <Alert type="dark" class="mb-2">Dark</Alert>
        <Alert type="success">Success</Alert>
    </div>
</template>

Update App Template

The App.vue file is a pivot component in Vue framework, it is also a main entry point to build the user interface in Vue.

Hence, add the following code in the App.vue file.

<template>
  <div class="mx-auto max-w-2xl lg:max-w-5xl">
    <h2 class="text-2xl font-bold tracking-tight sm:text-3xl mb-6 mt-6">Vue 3 Tailwind Alert Component Example</h2>
    <AlertComp />
  </div>
</template>

<script>
import AlertComp from './components/AlertComp.vue';

export default {
  components: {
    AlertComp
  }
}
</script>

Start Development Server

Start the Vue development server to view your Vue application:

npm run serve

Eventually, navigate to your web browser and open the below URL:

http://localhost:8080

Vue Flowbite Alert UI Component with Tailwind Tutorial

Conclusion

In Vue.js, the implementation of alert UI component can also be made possible with other libraries.

However, we used the Flowbite library to create alert component. It is an essential component for profoundly communicating with users for different scenarios.

By leveraging the power of Vue’s reactive mechanism and component-based architecture, alert box offers an uncomplicated way of showing success, error and warning messages.

Reference: https://flowbite.com/docs/components/alerts/