# UI Components

# Table

Tables / data grids

  • vuetable-2 - Data table simplify.
  • vue-tables-2 - Vue.js 2 grid components.
  • vue-datasource - A vue.js server side component to create dynamic tables.
  • ag-grid-vue - Vue adaptor for ag-Grid
  • vue-data-tables - Vue2.0 DataTables, based on element-ui.
  • vue-floatThead - Vue 2.0 component for floatThead, a floating & sticky table header plugin.
  • vuetiful-datatable - Datatable component with sorting, filtering, pagination, grouping and aggregation.
  • vue-materialize-datatable - VueJS datatable for Materialize CSS
  • vue-good-table - An easy to use, VueJS (2.x) table plugin with sorting, column filtering, pagination etc.
  • vue-grid - A flexible grid component for Vue.js
  • vue-easytable - A powerful table components based on Vue2.x
  • vue2-datatable-component - The best Datatable for Vue.js 2.x which never sucks
  • vue-js-grid - Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering
  • vue-handsontable-official - A Vue.js wrapper for the Handsontable spreadsheet component
  • vue-grid - A powerful flexbox grid system for Vue.js 2.x, built with inline-styles
  • vue-data-tablee - Based on vue-good-table, a simple and pretty table component
  • vue-scrolling-table - Simple table component with flexbox sizing, scrolled table body (horizontal and vertical), slots for all tr/th/td rendering.
  • el-search-table-pagination - Combines Form, Table and Pagination components of Element UI together. Based on Vue 2.x.(Detail)
  • vue-crud-x - Extensible crud component using Vuetify layout, other than the usual page, sort, filter, it is able to do nested CRUD, custom forms, filters, operations.
  • Vue Datatable - VueJS powered Datatable with Laravel server-side loading and JSON template setup
  • v2-table - A simple table component based Vue 2.x.
  • vue-cheetah-grid - A high-performance grid engine that work on a canvas for Vue.js.
  • vue-table-component - A straight to the point Vue component to display tables.
  • @lossendae/vue-table - Simple table component for Vue.js 2.x with pagination and sortable columns.
  • el-data-table - base on element-ui, makes crud easilys
  • DevExtreme Vue Grid - High-performance plugin-based Vue data grid for Bootstrap.
  • vue-ads-table-tree - A vue Table component, with filtering, sorting and pagination. Rows can have child rows, so a tree structure can be build. It also supports async calls to load rows from the backend. It's built with the css framework tailwindcss
  • @marketconnect/vue-pivot-table - A vue component for pivot table
  • vue-teible - Lightweight and flexible table component for the web
  • vue-jqxgrid - Vue data grid with filtering, sorting, editing, grouping, data export and other features.
  • vue-jqxpivotgrid - Vue pivot data grid with pivot designer, drill through cells, pivot functions.
  • toast-ui.vue-grid - Vue Wrapper for TOAST UI Grid.
  • vueye-datatable - Vueye data table is a responsive data table component based on Vue.js 2, it organizes your data per pages in order to navigate easily.
  • vue-sorted-table - A plugin to turn tables into sorted tables. Supports nested object keys, custom icons and reusable components.
  • vue-bootstrap4-table - An advanced data table based on Vue 2 and Bootstrap 4, which includes Multi column filtering, Multi column sorting, Pagination & Info, Checkbox rows and Highly customizable slot options.
  • vuejs-smart-table - Straight Forward Table Component using the vanilla HTML Table Structure with Sorting, Filtering, Pagination and Selection out of the box.
  • @myena/vue-table - Table Components for Client/Server data handling. Filter, sort, paginate, group, expanding details row. Highly customizible via slots for filter, headers, column, pagination, details row.
  • @alfsnd/vue-bootstrap-select - Vue version of bootstrap-select.
  • vue-jd-table - Advanced and flexible data table component for Vue 2. Feature Rich: search, filtering, exporting, pagination (traditional and virtual scroll) and so much more!
  • iview-table-page - Combines Table and Page components of iview UI together. Based on Vue 2.x. And Hear are some examples to use iview-table-page.
  • fancy-grid-vue - Vue adaptor for FancyGrid
  • vue-table-dynamic - A dynamic table with sorting, filtering, editing, pagination, multiple select, etc.
  • vue-quintable - A responsive and highly configurable table based on Vue 2.x and Bootstrap 4.x

# 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

# Tooltip

Tooltips / popovers

# Overlay

Overlay / modal / alert / dialog / lightbox / popup

  • vuedals - A VueJS (2.x) Plugin for multiple modals windows with a single component instance.
  • sweet-modal-vue - The sweetest library to happen to modals. Now available for Vue.js.
  • vue-js-modal - Simple to use, highly customizable, mobile friendly Vue.js 2.0+ modal with 0 dependencies.
  • vudal - Modal window for vue.js
  • vodal - A vue modal with animations.
  • vue-image-lightbox - A Vue image lightbox/gallery to display images nicely.
  • vue2-simplert - Vue 2 Simple Alert Component (SweetAlert Inspired) By Irfan Maulana
  • Vue-Semantic-Modal - Vue 2 Semantic-UI modal component without jQuery dependency
  • v-img - Easy to install image gallery.
  • vue-dialog-drag - Draggable dialog
  • vue-ya-semantic-modal - Yet another semantic-ui modal component for Vue2 without Jquery but with Vue transition
  • vue-pure-lightbox - Very simple lightbox plugin without any dependencies - only Vue!
  • v-viewer - Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js
  • vue-messagebox - Easy and made-to-order messagebox component on Vue.
  • vuejs-dialog - A lightweight, promise based alert, prompt and confirm dialog.
  • @hscmap/vue-window - Window UI Component for vue2.
  • vue-gallery - VueJS responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. Based on blueimp-gallery
  • vue-swal - A small wrapper for integrating SweetAlert to Vuejs. (Compatible with SSR)
  • vue-modal-dialogs - Promisify your own dialogs!
  • vue-img-view - a plugin for Vue.js, you can drag / view / rotate pictures anywhere
  • vue-modaltor - most advance configurable modal component for vuejs
  • v-modal-backdrop - A simple generic backdrop component for vue
  • vue-cute-modal - A simple and easy to use Modal component for Vue applications.
  • v-dialogs - A simple and powerful dialog, including Modal, Alert, Mask and Toast modes, based on Vue2.x
  • vue-gallery-slideshow - Responsive gallery component for VueJS
  • vue-a11y-dialog - A Vue.js component wrapper for the accessible dialog a11y-dialog.
  • vue-slideout-panel - Stackable panel component for VueJS
  • v-gallery - A Vue2 plugin for images show in gallery or carousel
  • vue2-image-loader - A image lazyLoad loader component for vue2
  • vue-my-photos - A simple dependency-free image lightbox component with filtering capabilities
  • vue-img-orientation-changer - A Vue.js directive that automatically adjust your img to correct orientation.
  • vue-topmodal - A fully customisable, easy to use, Vue.js modal component. (Responsive, Stackable, Scrollable, Animated)
  • vue-modal - Feed your objects array for multiple switchable modal content or quickly inline your content. A fully customisable vue modal component.
  • @innologica/vue-stackable-modal - Library for modal dialogs which can be stacked. Fully customizable and very easy to use.
  • vue-sweetalert2 - Wrapper for sweatlaert2 with support for TypeScript, Nuxt and SSR
  • vue-modality - A really nice Vue.js modal component
  • vue-tinybox - A tiny (only 2.5 KB minzipped) and slick lightbox gallery. Optimized for both desktop and mobile
  • vue-accessible-modal - A Vue.js accessible modal wrapper over your components
  • vuetify-dialog - Dialogs easy to use with Vuetify
  • vue-hawesome-modal - A Vue promisify modal component plugin based on Vuetify with Vuex
  • xmodal-vue - A simplistic and easy to use wrapper around your components that will help you create custom and dynamic modals, from your component
  • @kouts/vue-modal - A customizable, stackable and lightweight modal component that adheres to the guidelines set in WAI-ARIA Dialog (Modal) section of W3C
  • vue-final-modal - Tailwind-friendly, highly customizable, stackable modal component

# Parallax

  • vue-parallax - Scrolls an image slower than the window to create a neat optical effect.
  • vue-parallaxy - Vue.js component for parallax image scroll effects.
  • vue-mouse-parallax - A simple to use Mouse Parallax Component - Made with Vue.js
  • vue-parallax-js - Tiny vue component that adds a directive for parallax effect on elements.
  • vue-parallax-view - Create a composite control that displays different images that react to the mouse movement to create a depth effect

# Icons

# Marquee

# Minus Plus Input

# Charts

# Time

Display time / date / age

# Calendar

Display non-editable events in a Calendar

# Map

# Audio / Video

# Infinite Scroll

# Pull-to-refresh

  • vue-pull-refresh - A pull to refresh component for Vue.js 2.0.
  • vue-pull-to - A pull-down refresh and pull-up load more and infinite scroll for Vue.js component.
  • vue-data-loading - Another component for infinite scroll and pull down/up to load data.
  • vue-quick-loadmore - A pull-down refresh and pull-up infinite scroll plugin for Vue.

# Markdown

  • vue-markdown - A Powerful and Highspeed Markdown Parser for Vue.
  • vue-mavonEditor - A markdown editor based on Vue that supports a variety of personalized features.
  • vue-simple-markdown - A Simple and Highspeed Markdown Parser for Vue.
  • vue-simplemde - A wrapper around simplemde. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.

# PDF

  • vue-pdf - A pdf viewer based on mozilla's PDF.js
  • pdfvuer - A PDF viewer for Vue using Mozilla's PDF.js with text support. Demo

# Tree

# Graphs

  • vue-pipeline - A easy-to-use component to show beautiful responsive pipeline like jenkins blue ocean plugin

# Social Sharing

  • vue-social-sharing - A renderless Vue.js component for sharing links to social networks, compatible with SSR
  • vue-goodshare - Vue.js component for social share with beautiful button design. Simple install, extensive documentation, developer support, SEO friendly, clean code without scripts tracking user activity on the page, high speed. Work with Vue.js 2.x.
  • vue-socialmedia-share - A Vue.js component for sharing links to social networks, with Vue 2.X
  • vue-picture-sharesheet - A Vue Picture Sharesheet Component heavily inspired by the Image Sharesheet in Apple's Newsroom
  • vue-twitter - A Vue.js component for embed twitter widgets (e.g timeline, buttons)
  • vue-share-buttons - Vue.js component for placing buttons in your project using which you can share anything
  • vue-share-it - A Vue.js component for sharing links to social networks
  • vuesocial - One easy-to-use button component for Vue.js with 65+ social networks

# QR Code

  • vue-qriously - A Vue.js 2 component to draw QR codes on an HTML Canvas using qrious.
  • vue-qart - The directive of vue 2.x for qart.js.
  • vue-qrcode-reader - A Vue.js 2 component which detects and decodes QR codes from a camera stream.

# Miscellaneous UI Components

# Tabs

# Form

Let the user create & edit data

# Phone Number Input Formatter

# Pincode Input

# Picker

# Generator

  • FormSchema Native - Generate a form using JSON Schema and Vue.js
  • vue-generator - Initial router and components for the Vue project.
  • vue-form-json - Generate a vue form with validation and bulma style, from json
  • form-create - Form builder with dynamic rendering, data collection, validation, and submission capabilities, supporting json data
  • element-form-builder - Build element-ui forms with JSON Schema.
  • ncform - A very nice configuration generation way to develop form
  • Laraform - Advanced form builder for Vue.js with Laravel support
  • vue-ele-form - Vue DataForm, based on element-ui
  • vue-otp-2 - Vue OTP input 2, A Vue component for OTP input
  • vue-form-generator - A schema-based form generator component for Vue.js
  • vue-form-builder - Build powerful vue form with JSON schema and composition api, popular ui frameworks such as Element UI, View UI, Ant Design Vue are supported. Online Demo

# Date Picker

Date / datetime / time Picker

# Select

# Slider

# Drag and Drop

  • vuedraggable - Vue component allowing drag-and-drop sorting in sync with View-Model. Based on Sortable.js.
  • vue-dragula - Drag and drop so simple it hurts.
  • vue2-dragula - A vue-dragula fork for Vue2, with a lot of improvements.
  • awe-dnd - A sortable list directive with Vue.
  • vue-draggable-resizable - Vue2 component for draggable and resizable elements.
  • vddl - Vue components for modifying lists with the HTML5 drag & drop API, supports VueJs versions 1 and 2.
  • vue-drag-drop - A minimal and lightweight wrapper for the HTML5 Drag and Drop API.
  • vue-swing - A swipeable cards interface, as seen in apps like Jelly and Tinder.
  • vue-slicksort - A dependency-free set of mixins for animated, touch-friendly, sortable lists
  • draggable-vue-directive - A simple directive to handle drag and drop of any Vue component.
  • vue-smooth-dnd - Vue wrappers of smooth-dnd library. drag and drop, sortable library covering for many cases.
  • vue-drag-resize - A dependency-free Vue component for draggable and resizable elements with aspect ratio, reactive props etc
  • vue-drag-it-dude - Vue2 component, that allows you to drag object wherever you want.
  • vue-draggable - Vue Drag and Drop library without any dependency. Simple and easy to use.
  • vue-nestable - A simple drag & drop hierarchical list made as a vue component.
  • vue-tinder - Have your own Tinder and TanTan
  • vue-draggable-nested-tree - A powerful customizable draggable tree view component for Vuejs2 @phphe
  • vue-card-swipe - A touch slider for vue.js, support sliding in any direction to switch cards, compatible with PC and mobile
  • vue-drag-n-drop - A simple kanban board where the items can be dragged and dropped from the list on to the board
  • vue-card-stack - Stackable, swipeable, tweakable Vue card component

# Autocomplete

Autosuggest / autocomplete / typeahead

  • vue-instant - Vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications.
  • v-autocomplete - Autocomplete component for Vue.js
  • vue-auto-complete - Autocomplete for Vue2. Works with objects or api calls.
  • vue-autosuggest - WAI-ARIA complete Autosuggest component with full customization over rendering and styling.
  • v-autosuggest - A simple modular Vuejs component that autosuggest input from a dynamic or static data querying.
  • autocomplete - Simple Autocomplete component for Vue.js 2.*
  • vue-infinite-autocomplete - Vue infinite-autocomplete wrapper for Vue.js 2.*
  • vue-simple-suggest - Simple yet feature-rich autocomplete component for Vue.js
  • v-suggest - A Vue2 plugin for input content suggestions, support keyboard to quick pick.
  • vue-bootstrap-typeahead - An typeahead/autocomplete component for Vue2 using Bootstrap 4 CSS.
  • vue-email-dropdown - An autocomplete for custom email domains

# Type Select

Let the user select a tag / something while typing

# Color Picker

# Switch

Switch / on/off toggle / checkbox

# Masked Input

# Rich Text Editing

# Image Manipulation

Edit images

Display images

  • vue-cloudinary - A vue (2.0) plugin that offers a reusable directive to get images from Cloudinary with dynamic manipulation (resizing, cropping, effects, watermarking, scaling, formatting) and optimization (webp, png, auto quality, auto retina).
  • img-Vuer - An Mobile-First image viewer/gallery for Vue2
  • vue-image-loader - A vue loader/progressive image plugin like Medium.
  • vue-load-image - display loader during image loading, as well as by display alternate content when the image fails to load.
  • vue-image-painter - Image magic animation drawing effect component for Vue 2.x
  • vue-cosha - An easy to use vue directive that places a colourful shadow behind any image

# Video Manipulation

  • vue-playlist - A lightweight vue (2.0) component with no dependancies that offers truly seamless html5 video playback. The one and only working solution for seamless video play done with vanilla JS. It takes an array of videos and stitches them together into a single video.

# File Upload

  • vue-clip - Simple and hackable file uploader for VueJs. Supports Vue >= 2.1.
  • vue-simple-upload - Simple File upload component for Vue.js.
  • vue2-multi-uploader - A drag and drop multiple file uploader component that uses Vue.js v2 and Axios. Uploader shows file names, sizes and total size of files added. It also allows setting a minimum required number of files to upload.
  • vue-dropzone - A Vue.js (vue2) component for Dropzone.js - a drag’n’drop file uploads utility with image previews.
  • vue-transmit - A purely Vue.js drag & drop uploader component based on Dropzone.js for Vue 2.0
  • vue-upload-component - Vue upload component, Multi-file upload, Upload directory, Drag upload, Drag the directory. Supports Vue >= 2.0
  • vue-uploader - A Vue.js upload component powered by simple-uploader.js
  • ic-firebase-uploader - A clean multi-file upload component for Firebase storage.
  • vuejs-uploader - A resumable multipart file uploader for HUGE file uploads.
  • vue-filepond - A Vue.js component for FilePond - a file upload library that can upload anything you throw at it.
  • v-uploader - A Vue2 plugin to make files upload simple and easier, you can drag files or select file in dialog to upload
  • vue-file-agent - Full featured drag & drop enabled Vue file upload component with previews and upload progress

# Context Menu

# Miscellaneous Form Components

  • vue-gmaps - Search places and address using Google Maps API.
  • vuep - A component for rendering Vue components with live editor and preview.
  • vue-places - Places component is based on places.js for Vue 2.x. Turn any input into an address autocomplete.
  • vue-password-strength-meter - Password strength meter based on zxcvbn in vue.js.
  • vue-float-label - Float label pattern for Vue.js.
  • vue-longpress - A VueJS (2.x) button component that requires you to keep pressing to confirm a given action.
  • vue-google-autocomplete - A Vue.js (2.x) autosuggest component for the Google Maps Places API.
  • vue-default-value - Vue.js 2.x directive to set a default value for editable elements with no affect to the model state
  • vue-model-autoset - A Vue.js plugin to workaround Vue limitation in observing dynamically added properties with v-model directive
  • vue-submit - Simple implementation of Ladda (1, 2) in less than 90 lines of code with no dependencies.
  • vue-rate - Rate component for Vue
  • vuetify-google-autocomplete - A Vuetify ready Vue.js (2.x) autosuggest component for the Google Maps Places API.
  • vue-ripple-directive - Material Ripple Effect as Vue Directive.
  • vue-fab - Vue Floating Action Button.
  • vue-complexify - Vuejs porting library from jquery.complexify.js.
  • vue-mc - Models and Collections for Vue.js
  • vue-stars - Highly customizable rating control (using stars or other characters)
  • vue-confirmation-button - Customizable confirmation button that requires users to read messages before performing an action
  • vue-poll - A Vue.js component for voting
  • vue-diagrams - Diagram component for vue.js, inspired by react-diagrams
  • vue-easy-polls - A Vue.js component for creating polls, voting and showing results. It’s easy to implement and easy to customize.
  • vue-m-button - A beautiful button component for vue.
  • vue-long-click - Long click (long press) directive library for vue, support mobile and desktop.
  • vue-ui-predicate - A rules editor, generic filtering UI, predicates component for Vue JS.
  • vue-mobile-detection - Vue.js prototype function this.$isMobile() that returns a Boolean value depending on whether or not the user is browsing with a mobile.
  • vue-input-contenteditable - A Vue component wrapper for contenteditable with all the features you normally expect. Make beautiful inputs without the restrictions of input[type='text']
  • @utlime/vue-zoom - A Vue zoom component
  • vue-credit-card - A Vue Component for Credit Card Input & Masking & Preview
  • vue-simple-password-meter - Lightweight password strength meter with no dependency
  • vue-autosizer - A light replacement for built-in <textarea> and <input> elements allowing them to automatically stretch to fit the content
  • vue-interactive-paycard - A fantastic credit card form with smooth and sweet micro-interactions

# Wizard

  • vue-form-wizard - Tab based component which can replace classic bootstrap & jQuery form wizards
  • vue-stepper - A simple stepper with simple actions such as next, back and end to perform simple forms.
  • vue-stepper-component - A fully customizable Stepper component with Vuex support and Zero dependencies.

# CSV

  • vuecsv - A Simple CSV Downloader from json with option modal panel component.

# Comment System

  • vue-comment-grid - Responsive Vue.js comment system plugin that built with CSS Grid and Firebase REST API + Authentication.

# Canvas

  • link-prevue - Flexible component for generate a link preview.

# Tour