Awesome Vue.js

Appearance

On this page

UI Components ​

Table ​

Tables / data grids

  • vue-cheetah-grid - A high-performance grid engine that work on a canvas for Vue.js.

Notification ​

Toaster / snackbar β€” Notify the user with a modeless temporary little popup

Loader ​

Loaders / spinners / progress bars β€” Let the user know that something is loading

Progress Bar ​

A slim progress bar at the top of the page

  • vue-next-progressbar - Slim progress bars (1KB gzipped) for Vue 3
  • vue3-progress - Fully customizable Vue 3 plugin to display a progress bar while waiting for something, e.g. HTTP requests

Tooltip ​

Tooltips / popovers

  • v-tooltip - Easy tooltips with Vue 2.x.
  • @adamdehaven/vue-custom-tooltip - Vue 2 & 3 customizable, reactive, and reusable tooltip component that supports plugin options, props, and multiple use-cases. Also works with SSR (e.g. VuePress, Nuxt) and includes TypeScript types. (Vue 3 is available on next branch/npm tag)
  • vue-use-popperjs - Vue 2 & 3 Popper hook powered by Popper.js
  • vue-follow-tooltip - Tiny tooltip directive for Vue 3
  • Tippy.vue - Nesting-free Tippy.js directive/component for Vue 3. A drop-in addition with no structural or style changes required. Supports both individual and singleton tooltips

Overlay ​

Overlay / modal / alert / dialog / lightbox / popup

  • vue-final-modal - Tailwind-friendly, highly customizable, stackable modal component
  • vuesence-modal-window - Simple Modal window Vue.js component that takes care of overlay, centering, animation, outside click/Escape key/X-mark closing and allows you to concentrate on its content only
  • vue-it-bigger - A simple image / (YouTube) video lightbox component for Vue.js
  • v3confirm - A plugin dedicated for Vue 3 to show confirm dialog modal
  • vue3-promise-dialog - Let's you create promise based dialogs in Vue 3 (Composition or Options API) with ease

Icons ​

Marquee ​

  • vue3-marquee - A simple and responsive marquee component for Vue 3 applications with 0 dependencies

Minus Plus Input ​

  • slither-slider - Carousel for images, videos, or components. Throw pretty much anything you want at it
  • vue-slick-carousel - A carousel with slick features & SSR support written for faster Luxstay
  • @jfm/vue-carousel - A Vue carousel component
  • vue-snap - Lightweight Carousel based on Scroll Snap CSS
  • vuerollr - Mouseover gallery plugin for Vue.js. Supports image and video
  • vue-splide - Splide is a free lightweight but powerful slider and carousel, written in pure JavaScript without any dependencies. It supports a thumbnail slider, nested slide
  • swiper - Official Swiper component for Vue 3. Tree shakable, SSR support, typing, a11y and a lot more
  • vue-split-carousel - A carousel component meanwhile display several carousel item, supports Vue 2 and Vue 3
  • vue-concise-carousel - Vue Concise Carousel with True SSR. Works for Vue 2 & 3

Charts ​

Time ​

Display time / date / age

Map ​

Audio / Video ​

  • vue-use-sound - A Vue Hook for playing sound effects
  • vue-flv-player - An HTML5 Flash Video (FLV) Player component for Vue 2.x, based on flv.js
  • vue-audio-tapir - Audio recorder component for Vue 3 that enables to record, play and send audio messages to a server.

PDF ​

Tree ​

  • vue-finder - A component to display hierarchical data, with selection, filtering and drag & drop
  • vue3-router-tree - This component is based on Vue.js 3, it represents your routes or items as a tree view
  • object-visualizer - Vue 3 JSON inspector with Chrome-like theme
  • vue-virtual-tree - Tree component for large amount of data, base on Vue 3

Graphs ​

  • vnodes - General purpose components to create SVG interactive graphs, diagrams or node based visual tools
  • v-network-graph - An interactive SVG based network-graph visualization component for Vue 3
  • coya - Diagram drawing library (Vue 3 only)

Social Sharing ​

  • vue-socials - Social media share buttons and counts for Vue.js

QR Code ​

  • vue3-qr-reader - A Vue 3 QR reader component. Refactor vue-qrcode-reader for Vue 3 compatibility
  • vue-json-search - Headless Vue 3.x component for easy and simple JSON-based search

Miscellaneous UI Components ​

Tabs ​

Form ​

Let the user create & edit data

Phone Number Input Formatter ​

Picker ​

Generator ​

  • vue3-otp-input - A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API

Date Picker ​

Date / datetime / time Picker

Select ​

  • vue-selectize - A Vue.js component wrapper around Selectize.js, a vanilla JS select component
  • @vueform/multiselect - Vue 3 multiselect component with single select, multiselect and tagging options

Slider ​

  • @vueform/slider - Vue 3 slider component with multihandles, tooltips merging and formatting

Drag and Drop ​

  • vuedraggable - Vue component allowing drag-and-drop sorting in sync with View-Model. Based on Sortable.js.

Color Picker ​

  • vue-color-input – Vue 3 color picker component whose goal is to replace <input type="color">

Switch ​

Switch / on/off toggle / checkbox

  • @vueform/toggle - Vue 3 toggle component with labels, custom slots and styling options

Rich Text Editing ​

  • vue-quill - A Vue 3 rich text editor component based on Quill Editor

Image Manipulation ​

Edit images

  • vue-picture-cut - Image cropper：scale, flip, rotate, edge check, rectangle clip, ellipse clip
  • vue-img-cutter - A vue plugin for image cutting tool,it's very convenient to use

Display images

  • vue-image-kit - Vue.js Image Kit Component with Lazy Load built in and Responsive Images

File Upload ​

  • vue-dropify - A simple image dropzone component for Vue.js

Miscellaneous Form Components ​

Canvas ​

Maintained by Rodger Jordas