GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → nickbasile → tailwind-vue-modal

nickbasile / tailwind-vue-modal

Licence: MIT License
A simple configurable modal component built with Vue.js and Tailwind CSS

Programming Languages

PHP
23972 projects - #3 most used programming language
Vue
7211 projects
HTML
75241 projects

Labels

laravelvuetailwindcss

Projects that are alternatives of or similar to tailwind-vue-modal

next.js-tailwindcss-template
Opinionated Next.js and TailwindCSS template.
Stars: ✭ 15 (-37.5%)
Mutual labels:  tailwindcss
medayz.me
my personal website
Stars: ✭ 20 (-16.67%)
Mutual labels:  tailwindcss
gridsome-starter-liebling
Gridsome starter based on the Liebling theme for Ghost. Content is added via markdown, while Tailwind CSS is used for the layout/styling.
Stars: ✭ 21 (-12.5%)
Mutual labels:  tailwindcss
laravel-mix-tailwindcss
Tailwind CSS wrapper for Laravel Mix.
Stars: ✭ 43 (+79.17%)
Mutual labels:  tailwindcss
demo-tailwindcss
🎐 TailwindCSS 2 + Oruga demo
Stars: ✭ 15 (-37.5%)
Mutual labels:  tailwindcss
fullstack-template
This is a template repository to get up and running quickly with Vite, React, Jest, Express Docker, and Github Actions for CI/CD.
Stars: ✭ 14 (-41.67%)
Mutual labels:  tailwindcss
stitchwind
A bridge between Tailwind and Stitches
Stars: ✭ 33 (+37.5%)
Mutual labels:  tailwindcss
rebuilding-acquia
A clone of Acquia's dashboard, built with Vue.js and Tailwind CSS.
Stars: ✭ 20 (-16.67%)
Mutual labels:  tailwindcss
top-nuxt3
Full stack Nuxt 3 Template starter with Supabase and Tailwindcss
Stars: ✭ 59 (+145.83%)
Mutual labels:  tailwindcss
status-page
Free Status Page Template built with Tailwind CSS
Stars: ✭ 37 (+54.17%)
Mutual labels:  tailwindcss
tailwind-bootstrap-grid
Tailwind CSS plugin that generates Bootstrap's flexbox grid
Stars: ✭ 96 (+300%)
Mutual labels:  tailwindcss
db-portfolio
My personal portfolio website.
Stars: ✭ 97 (+304.17%)
Mutual labels:  tailwindcss
tailwindcss-landing-gradients
A landing page made with tailwindcss and the new Gradient feature.
Stars: ✭ 41 (+70.83%)
Mutual labels:  tailwindcss
parsers
Specify is a central platform for companies who want to unify their brand identity, by connecting their design system tools.
Stars: ✭ 50 (+108.33%)
Mutual labels:  tailwindcss
hugo-starter-tailwind-basic
A basic and simple to set up Hugo with TailwindCSS starter project.
Stars: ✭ 80 (+233.33%)
Mutual labels:  tailwindcss
sveltober
Cybernetically enhanced October applications
Stars: ✭ 19 (-20.83%)
Mutual labels:  tailwindcss
RailsBooster
Pre-Configured Ruby On Rails Template To Provide Instant Productivity ⚡️
Stars: ✭ 22 (-8.33%)
Mutual labels:  tailwindcss
merakiui
Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant Dark Mode 🚀 ☄️.
Stars: ✭ 1,185 (+4837.5%)
Mutual labels:  tailwindcss
eleventy-chirpy-blog-template
Blog template for 11ty based on Chirpy UX
Stars: ✭ 37 (+54.17%)
Mutual labels:  tailwindcss
building-realworld-user-interfaces-using-tailwind
Demo of building real-world UIs using TailwindCSS
Stars: ✭ 87 (+262.5%)
Mutual labels:  tailwindcss
View All Similar Projects ➔

A simple configurable modal component built with Vue.js and Tailwind CSS in Laravel. Build it yourself with this tutorial on Nick Basile's Blog.

How To Use:

  1. Add the component to any page
<modal-component></modal-component>
  1. Call the modal from that page
<script type="text/javascript">
  vueModal().show()
</script>
  1. You can use a chainable method calls or pass data directly into the methods
//Success
vueModal().success().show();

//Error
vueModal().error().show();

//Info
vueModal().info().show();

//Warning
vueModal().warning().show();

//Change Header
vueModal().title('Your Header').show();

//Change Body
vueModal().text('Your Body').show();

//Dismiss a modal
vueModal().dismiss();

//Or
vueModal(header = string, body = string, type = string, visiblity = bool);
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].