In this tutorial, we will see simple vue js modal, vuejs popup modal, vue modal component, creating modal using vue js 3 composition api, examples with Tailwind CSS & Vue 3.
Tool Use
Vue 3 or Vue js Composition api
Tailwind CSS 2.x
Heroicons Icon
First you need to setup vue 3 project with tailwind css. You can install manually or you read below blog.
How to Install Tailwind CSS in Vue 3
Quick Way to Start Project with Vite Vue 3 Headless UI Tailwind CSS
Example 1
Vue 3 simple modal with tailwind css.
Modal.vue
<template>
<div class="container mx-auto">
<div class="flex justify-center">
<button
@click="isOpen = true"
class="px-6 py-2 text-white bg-blue-600 rounded shadow"
type="button"
>
Open Model
</button>
<div
v-show="isOpen"
class="
absolute
inset-0
flex
items-center
justify-center
bg-gray-700 bg-opacity-50
"
>
<div class="max-w-2xl p-6 bg-white rounded-md shadow-xl">
<div class="flex items-center justify-between">
<h3 class="text-2xl">Model Title</h3>
<svg
@click="isOpen = false"
xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8 text-red-900 cursor-pointer"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div class="mt-4">
<p class="mb-4 text-sm">
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Voluptatibus qui nihil laborum quaerat blanditiis nemo explicabo
voluptatum ea architecto corporis quo vitae, velit temporibus
eaque quisquam in quis provident necessitatibus.
</p>
<button
@click="isOpen = false"
class="px-6 py-2 text-blue-800 border border-blue-600 rounded"
>
Cancel
</button>
<button class="px-6 py-2 ml-2 text-blue-100 bg-blue-600 rounded">
Save
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isOpen: false,
};
},
};
</script>
Example 2
Tailwind CSS responsive Modal using vue js 3 composition api.
Modal.vue
<template>
<div class="container mx-auto">
<div class="flex justify-center">
<button
@click="isOpen = true"
class="px-6 py-2 text-white bg-blue-600 rounded shadow"
type="button"
>
Open Model
</button>
<div
v-show="isOpen"
class="
absolute
inset-0
flex
items-center
justify-center
bg-gray-700 bg-opacity-50
"
>
<div class="max-w-2xl p-6 mx-4 bg-white rounded-md shadow-xl">
<div class="flex items-center justify-between">
<h3 class="text-2xl">Model Title</h3>
<svg
@click="isOpen = false"
xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8 text-red-900 cursor-pointer"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div class="mt-4">
<p class="mb-4 text-sm">
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Voluptatibus qui nihil laborum quaerat blanditiis nemo explicabo
voluptatum ea architecto corporis quo vitae, velit temporibus
eaque quisquam in quis provident necessitatibus.
</p>
<button
@click="isOpen = false"
class="px-6 py-2 text-blue-800 border border-blue-600 rounded"
>
Cancel
</button>
<button class="px-6 py-2 ml-2 text-blue-100 bg-blue-600 rounded">
Save
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
let isOpen = ref(false);
return { isOpen };
},
};
</script>