vue3-tailwind-modal
v1.0.3
Published
A simple TailwindCSS modal, written in Vue3.
Downloads
268
Maintainers
Readme
Vue3 Tailwind Modal
A simple modal, written in Vue3.
Note: Tailwind is required to use this package, but is not forced as a dependency. See here for how to set it up with Vite.
Screenshot(s)
Installation
Install Vue3 Tailwind Modal with npm
npm install vue3-tailwind-modal
Then, to avoid the css being purged by tailwind, add ./node_modules/vue3-tailwind-modal/**/*.js
to the content
section of your tailwind config (leave the rest of this config alone, just add this entry in - see below):
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
"./node_modules/vue3-tailwind-modal/**/*.js",
],
theme: {
extend: {},
},
plugins: [],
}
Props
| Prop | Type | Default | Description | Validation | | :------------------- | :------ | :------------------------------------------------- | :------------------------------------------------------------------- | :--------- | | showModal | Boolean | false | Toggles whether the modal can be seen. | N/A | | allowBackgroundClose | Boolean | true | Allows closing of the modal by clicking the background. | N/A | | closeOnEscape | Boolean | true | Allows closing of the modal by clicking the Esc key on the keyboard. | N/A | | colors | String | "bg-gray-100 dark:bg-slate-700 dark:text-gray-200" | Allows customisation of the modal's background color. | N/A | | modalClasses | String | "" | Allows any custom classes to be added to the modal. | N/A |
Usage/Example
Basic Example
<script setup lang="ts">
import { ref } from "vue";
import { Vue3TailwindModal } from "vue3-tailwind-modal";
const showModal = ref(false);
</script>
<template>
<div class="w-screen grid place-items-center justify-center min-h-screen bg-slate-700">
<button
@click="showModal = true"
class="rounded-xl px-2 text-white dark:text-gray-700 bg-gray-700 dark:bg-gray-200 hover:bg-gray-600 dark:hover:bg-gray-300 disabled:bg-gray-500 dark:disabled:bg-gray-500 text-lg"
>
Show Modal A
</button>
<Vue3TailwindModal :showModal="showModal" @close="showModal = false">
<template #header><h2 class="text-lg">Example 1</h2></template>
The default slot is the body, so we don't need to wrap this inside template tags.
</Vue3TailwindModal>
</div>
</template>
The footer can be customised too, eg.
<template>
<Vue3TailwindModal :showModal="showModal" @close="() => showModal = false">
<template #header><h2 class="text-lg">Example 2</h2></template>
The default slot is the body, so we don't need to wrap this inside template tags.
<template #footer><div class="border-t mt-2 text-right">The footer can be customised, too.</div></template>
</Vue3TailwindModal>
</template>
The color of the modal can also be customised
Pass the prop colors
to the modal.
<template>
<Vue3TailwindModal
:showModal="showModal"
@close="() => showModal = false"
colors="bg-blue-600 dark:bg-blue-900 text-gray-200"
>
<template #header><h2 class="text-lg">Example 3</h2></template>
The background color of the modal can also be customised.
</Vue3TailwindModal>
</template>
Upgrading from 0.0.8
You no longer need to import the css file for the transition to work, so remove the following and it should all work as before:
<style scoped>
@import "vue3-tailwind-modal/dist/style.css";
</style>
Development
First always run npm install
.
There is a folder playground
inside this repository which can be used as a basis for development. Clone the repo and run:
npm run dev:install
npm run dev:run
To launch this folder with Vite.
The App.vue
file can be modified to see changes in the browser, and navigating to /src/components/vue3-tailwind-modal/Vue3TailwindModal.vue
will update the changes on the browser for the Modal.
To test the packaged build, run:
npm run build:vite
npm run dev:run-pack
This will run a dev server with the packaged version of vue3-tailwind-modal3
, instead of the normal one.
Future Plans
[ ] Add tests so that when making changes, we can automate testing it still works.