Create modals with Vue3 Teleport + TailwindCSS

• unplugin-icons

  27 3,563 8.0 TypeScript

  🤹 Access thousands of icons as components on-demand universally.

  

If you don't want to complicate yourselves with Fonts/SVGs or icon components, if you are using Vite ⚡️, there is this awesome plugin based on Iconify you can use, it's ridiculously easy.

• vueuse

  86 18,816 9.5 TypeScript

  Collection of essential Vue Composition Utilities for Vue 2 and 3

  

// Same implementation as https://github.com/vueuse/vueuse/blob/main/packages/core/onClickOutside/index.ts import { watch, unref, onUnmounted } from 'vue'; const EVENTS = ['mousedown', 'touchstart', 'pointerdown']; function unrefElement(elRef) { return unref(elRef)?.$el ?? unref(elRef); } function useEventListener(...args) { let target; let event; let listener; let options; [target, event, listener, options] = args; if (!target) return; let cleanup = () => {}; watch( () => unref(target), el => { cleanup(); if (!el) return; el.addEventListener(event, listener, options); cleanup = () => { el.removeEventListener(event, listener, options); cleanup = noop; }; }, { immediate: true }, ); onUnmounted(stop); return stop; } export default function useClickOutside() { function onClickOutside(target, callback) { const listener = event => { const el = unrefElement(target); if (!el) return; if (el === event.target || event.composedPath().includes(el)) return; callback(event); }; let disposables = EVENTS.map(event => useEventListener(window, event, listener, { passive: true }), ); const stop = () => { disposables.forEach(stop => stop()); disposables = []; }; onUnmounted(stop); return stop; } return { onClickOutside, }; }

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• alvaro-dev-labs-

  1 6 0.0 JavaScript

  Alvaro Dev Labs ⚡️

View on GitHub

• Tailwind CSS

  1,286 78,889 9.4 TypeScript

  A utility-first CSS framework for rapid UI development.

  

In this tutorial, we're going to cover step by step how to implement a modal dialog with this feature and styling it with my favorite utility framework TailwindCSS along with:

Suggest a related project