In this article, I will guide how to create modal popup using daisyUI library.

Prerequisites

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

Create Vue.js Project

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

vue create tailwindcss

Install daisyUI using 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 'modalpopupdemo.vue'. Now open modalpopupdemo.vue component and add the following code

<template>
    <div class="justify-center flex bg-blue-300 items-center h-screen">
        <a href="#my-modal-2" class="btn">open modal</a>
        <div class="modal" id="my-modal-2">
            <div class="modal-box">
                <h3 class="font-bold text-lg">Welcome to daisyUI </h3>
                <p class="py-4">
      Use daisyUI Components in Vue.js  <br>
 Node.js and Tailwind CSS</p>
                <div class="modal-action">
                    <a href="#" class="btn">Yay!</a>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'modalpopupdemo',
    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 componen. Add the following code in App.vue component

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

<script>
import modalpopupdemo from './components/modalpopupdemo.vue'
export default {
  name: 'App',
  components: {
    modalpopupdemo
  }
}
</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 following command.

npm run serve

Click on open modal button,

Summary

In this article, we learned how to create modal popup in Vue.js.