Post
Ask Question

How To Create Modal Popup In Vue.js

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

Prerequisites

  • 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: [
    "./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.


Similar Articles