How To Create Modal Popup In Vue.js

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


  • node.js installed
  • Tailwind CSS

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: [
  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

    <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>
export default {
    name: 'modalpopupdemo',
    props: {
        msg: String
<style scoped>
  h3 {
      margin: 40px 0 0;
  ul {
      list-style-type: none;
      padding: 0;
  li {
      display: inline-block;
      margin: 0 10px;
  a {
      color: #42b983;

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

  <div id="app">

import modalpopupdemo from './components/modalpopupdemo.vue'
export default {
  name: 'App',
  components: {

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

Now run the application by using following command.

npm run serve

Click on open modal button,


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