How to Build Modal Dialog in Vue 3 using Tailwind

Last Updated on by in Vue JS

In this tutorial, we will learn how to create a modal dialog box in Vue using Flowbite Vue and Tailwind CSS.

A modal component is a very useful GUI component that helps to display important information, collect information from the site visitors.

We need to add tailwind and Flowbite libraries in Vue to create a modal component. Tailwind CSS is a great dynamic CSS framework that helps web developers to swiftly create intuitive and responsive user interfaces.

It offers tons of pre-designed utility classes that can directly be added to HTML elements.

A modal dialog UI, ideally known by the name of modal. It is a user interface element that visible over the main content of a web page and it requires user interaction before allowing them to continue interacting with the rest of the interface.

We have enumerated certain process that will help you build Modal in Vue and at the same time allows you to show additional information, collect user input, or help user to make a decision.

  • Step 1: Install Vue App
  • Step 2: Add Flowbite Package
  • Step 3: Define Tailwind
  • Step 4: Make Component File
  • Step 5: Create Basic Modal in Vue
  • Step 6: Update App Component
  • Step 7: Start Vue Server

Install Vue App

To work in the Vue environment, you must set up Node in your development machine, To get started with Node, ensure that you vist: https://nodejs.org/.

The other essential step is to install the Vue CLI, execute the below command:

npm install -g @vue/cli

Once the Vue CLI tool is utterly installed, make sure to run the following command to install a Vue application.

vue create vue-demo-app

Vue CLI asks to which version to install, make sure to choose Vue 3.

Navigate to Vue project folder:

cd vue-demo-app

Add Flowbite Package

We have now completely set up the basic Vue app, its time to install the Flowbite library using the suggested command:

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

Define Tailwind in Vue

Flowbite is solely depends on Tailwind, here is why we will open the public/index.html file. Inside the head section, we will place the Tailwind CSS and script as suggested below.

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

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

Make Component File

In Vue, we can create component which can be used to form any type of functionality.

To create a basic component in Vue, you have to create a new components/ModalComp.vue file with given code.

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

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

Create Basic Modal in Vue

We defined the Modal directive, set the size of the modal bind the closeModal method to it. You can add the different sizes to the modal: md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, and 7xl.

Add code in the components/ModalComp.vue file:

<script setup>
import { Modal } from "flowbite-vue";
import { ref } from "vue";

const isShowModal = ref(false);
function closeModal() {
  isShowModal.value = false;
}
function showModal() {
  isShowModal.value = true;
}
</script>
<template>
  <button
    @click="showModal"
    type="button"
    class="mt-5 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
  >
    Show modal
  </button>
  <Modal :size="size" v-if="isShowModal" @close="closeModal">
    <template #header>
      <div class="flex items-center text-lg">Terms of Service</div>
    </template>
    <template #body>
      <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
        With less than a month to go before the European Union enacts new consumer privacy
        laws for its citizens, companies around the world are updating their terms of
        service agreements to comply.
      </p>
      <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
        The European Union’s General Data Protection Regulation (G.D.P.R.) goes into
        effect on May 25 and is meant to ensure a common set of data rights in the
        European Union. It requires organizations to notify users as soon as possible of
        high-risk data breaches that could personally affect them.
      </p>
    </template>
    <template #footer>
      <div class="flex justify-between">
        <button
          @click="closeModal"
          type="button"
          class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
        >
          Decline
        </button>
        <button
          @click="closeModal"
          type="button"
          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
        >
          I accept
        </button>
      </div>
    </template>
  </Modal>
</template>

Update App Component

We are now finally going to add or import the ModalComp component in the Vue’s main 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 Modal Dialog Component Example
    </h2>
    <ModalComp />
  </div>
</template>

<script>
import ModalComp from "./components/ModalComp.vue";

export default {
  components: {
    ModalComp,
  },
};
</script>

Start Vue Server

We are now finally ready to view our app, therefore execute the given command and start the development server:

npm run serve

Your app’s link will be printed on the console, use either of the link to view your app.

http://localhost:8080

How to Build Modal Dialog in Vue using Tailwind

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.