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
  • Syncfusion Data Grid for Vue - Displays and manipulates tabular data with features such as paging, sorting, filtering, editing, and grouping.
  • @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.

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.

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.

Icons

  • vue-awesome - Font Awesome component for Vue.js, using inline SVG.
  • vue-material-design-icons - A collection of SVG Material Design icons as single file components.
  • vue-icon-font - A iconfont plugin for Vuejs (support Font-class and Symbol).
  • vue-ionicons - Vue Icon Set Components from Ionic Team.
  • vue-ico - Dead easy icons for Vue with drop-in browser support & selective bundling
  • mdi-vue - Material Design Icon components for Vuejs
  • vue-fontawesome - Font Awesome 5 Vue component
  • g-icon - Simple icon component for your svg icons (compatible with Font Awesome-like font toolkits)
  • vue-simple-line-icons - Simple Line Icons component for Vuejs
  • vue-country-flag - Vue component for country flag icons
  • vicon - Vicon is an simple iconfont component for vue.
  • md-svg-vue - Material Design Icons by Google for Vue.js & Nuxt.js (server side support (with caching), inline svg rendering, official icon names)
  • vue-lang-code-flags - Vue component which shows the flag of the country from which the language comes from
  • vue-zondicons - Vue component for the beautiful Zondicon svg icons
  • vue-eva-icons - Simply beautiful open source eva icons as Vue components.
  • vue-unicons - 1000+ Pixel-perfect svg unicons for your next project as Vue components.
  • vue-fa - Simple FontAwesome 5 Vue.js 2 component.
  • vue-cryptoicon - Beautiful pixel perfect 400+ cryptocurrency and 10+ Fiat currency icon.

Minus Plus Input

Charts

Time

Display time / date / age

Calendar

Display non-editable events in a Calendar

Map

Audio / Video

  • Vue-APlayer - Easy-to-config music player for Vue 2.x.
  • vue-audio - audio-tag wrapper; sound player component for Vue 2.x
  • vue-dplayer - A Vue 2.x video player component based on DPlayer.
  • vue-canvasvideo - A Vue 2.x component for video backgrounds and autoplay video on iOS/Safari.
  • vue-music - A Vue component base on html5 <audio>.
  • vue-audio-visual - Vue HTML5 audio visualization components.
  • vue-plyr - A set of Vue components for the plyr video & audio player.
  • v-playback - A Vue2 plugin to make video play easier.
  • vue-audio-recorder - Audio recorder for Vue.js. It allows to create, play, download and store records on a server
  • vue-video-section - A simple video header/section component for Vue. Good for video backgrounds and overlaying content on them.

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

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

Social Sharing

  • vue-social-sharing - A Vue.js component for sharing links to social networks, work with Vue.js 1.X or 2.X.
  • 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

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

Picker

  • vue-smooth-picker - A smooth picker component for Vue 2.x, like iOS native datetime picker.

Generator

  • FormSchema Native - Generate a form using JSON Schema and Vue.js
  • vue-awesome-form - A vue.js component just like json-editor
  • 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

Date Picker

Date / datetime / time Picker

Select

  • vue-select - A native Vue.js component that provides similar functionality to Select2 without the overhead of jQuery.
  • vue-multiselect - Universal select/multiselect/tagging component for Vue.js.
  • stf-vue-select - most flexible and customized select Vue2
  • vue-select-image - Vue 2 Component for selecting image from list
  • @riophae/vue-treeselect - A multi-select component with nested options support for Vue.js.
  • @k186/pd-select - A mobile UI component like IOS picker for Vue 2.x,can be wheel pick what ever you defined.
  • vue-dropdowns - A minimalistic and adaptable way to display select boxes if using objects for vue2.x
  • v-cascade - A lovely component of cascade selector with Vue 2.x (Support both of PC and Mobile)
  • vue-multi-select - A custom component to make select/multiselect for Vue2.
  • v-region - A simple region selector, provide Chinese administrative division data.
  • v-selectpage - A powerful selector for Vue2, list or table view of pagination, use tags for multiple selection, i18n and server side resources supports.
  • vue-cool-select - Bootstrap / Material Design theme, support slots, autocomplete, events, validation and more.

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-draggable-nested-tree - A powerful customizable draggable tree view component for Vuejs2 @phphe

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-awesomplete - Vue wrapper for Awesomplete
  • 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.

Type Select

Let the user select a tag / something while typing

  • vue-input-tag - Vue.js 2.0 Input Tag Component.
  • v-distpicker A flexible, highly available district picker for picking provinces, cities and districts of China for Vue.js 2.x.
  • vue-img-inputer - A graceful, highly customizable img type input for Vue 2
  • vue-img-preview - An image input preview component in vue 2
  • v-image - Tiny little component for input type=file (< 1kb, gzipped)
  • @voerro/vue-tagsinput - A simple tags input Vue.js 2 component with typeahead/autocomplete
  • vue-tag-selector - Tag-like input. Light, customizable and handles REGEX validation!

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.

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

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-ip-input - An ip input component for Vue.js 2.x
  • 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.

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