# UI Utilities

# Event Handling

Handling of user events (scroll, click, key strike, ...)

  • vue-shortkey - Vue-ShortKey - plugin for Vue.js.
  • vue-throttle-event - Throttle events based on requestAnimationFrame.
  • vue-waypoint - Waypoint component for Vue, this is the easiest way to trigger a function when you scroll.
  • vue-clickaway - Reusable clickaway directive for reusable Vue.js components.
  • vue-scrollfire - Fires an event on a specific scroll position.
  • vue-resize-directive - Vue directive to detect resize events with deboucing and throttling capacity.
  • v-click-outside - Vue directive to react on clicks outside of an element without stopping the event propagation.
  • vue-outside-events - Vue 2.x directive to help a specified element listen for specific events occurring outside of itself.
  • vue-selectable - Vue 1.x/2.x directive to make items selectable by mouse.
  • vue-click-helper - Vue2.x directive to handle click event and dblclick event on same element.
  • v-hotkey - Vue 2.x directive for binding hotkeys to components.
  • vue-resize - Vue 2.x component to detect DOM elements resizing (event based/no window.onresize)
  • vue-observe-visibility - Vue 2.x directive using Intersection Observer API that detects if the element is visible (in the viewport and not hidden by CSS).
  • v-dragged - Vue 2.x directive plugin for drag event detection.
  • vue-esc - Vue.js directive to add a document event listener on escape keyup.
  • vue-global-events - A component to handle global events (like shortcuts) using Vue’s event modifiers
  • vue-edge-check - Check browser edge to prevent transition effect triggered oddly when swipe edge with vue-router
  • vue-mutation-observer - A simple and tiny directive to observe changes in DOM use MutationObserver API
  • vue-scroll-show - Showing the element if the user reached it after scroll
  • vue-tabevents - Easy communication between other opened tabs
  • vue-visibility-trigger - Declaratively trigger methods when scrolled into view
  • v-click-outside-x - Vue V2 directive to react on click, touch, pointer or multiple events outside an element
  • vue-keypress - Global keypress event handler component for Vue.js applications
  • vue-pseudo-window - Component to declaratively interface window/document in your Vue template

# Responsive Design

  • vue-viewports - Define your custom viewports and use them in your components.
  • vue-responsive - Vue.js(2.x) directive to hide/show HTML-elements with the Bootstrap 4, 3 or self defined breakpoints.
  • vue-match-media - Vue 2.x-compatible plugin that offers a consistent, semantic approach to making components media query-aware.
  • vue-media-query-mixin - Vue 2 media query mixin that can be used in both component js and component template. Compatible with bootstrap and vuetify viewports. wXS returns if screen width is xs, wSM returns true if screen width is sm, etc...
  • vue-breakpoints - Vue 2 minimal components to show and hide elements based on breakpoints. Inspired by Airbnb.
  • vue-mq - Offer some useful tools to quickly setup responsive design with a semantic and mobile-first API (Vue 2.x)
  • VueResizeSensor - A container that supports resize event.
  • vue-breakpoint-component - A render-less component for composing CSS breakpoint state.
  • fine-mq - A fine API to manage media queries in JS with ease and first-class integration with VueJS as a plugin.
  • vue-responsive-components - Create responsive components with ResizeObserver.
  • vue-screen-size - Get easy and reactive access to the width and height of your screen
  • vue-container-query-2 - Smart vue plugin for working with css container query
  • vue-provide-responsive - Breakpoint-based responsive helpers using Provide\Inject with SSR support
  • vue-container-query-2 - Smart vue plugin for working with css container query

# Form

# Validation

  • vee-validate - Simple Vue.js input validation plugin.
  • vue-rawmodel - RawModel.js plugin for Vue.js v2. Form validation has never been easier.
  • vuelidate - Simple, lightweight model-based validation for Vue.js.
  • simple-vue-validator - A simple yet flexible validator library for vue.js.
  • vue-vform - Vue.js 2 form component that integrates jQuery Validation and Axios.
  • vue-form - Comprehensive form validation for Vue.js.
  • vuelidation - simple, powerful, vuejs validation.
  • laravel-vue-validator - Display errors from laravel validation rules
  • vue-daval - Super vue data validator. Easiness, simplicity, accurate.
  • willvalidate - Validation Forms for Vue.js.
  • vue-m-validator - Model data validation library, for VueJs.
  • vue-isyourpasswordsafe - A small utility written in Vue that checks if the given password has been leaked against the Have I Been Pwned API.
  • vue-form-send - A Vue.js directive for sending data from form and primitive validation
  • FormVuelar - Vue form components with server side validation in mind
  • vue-final-validate - Vue validation solution from my development experience, support nested, async.
  • vform - A simple way to handle Laravel back-end validation in Vue.
  • vue-form-container - A Provider Component that encapsulate your forms and handle their states and validations
  • ps-validation - A Vue plugin that provides out-of-the-box data validation rules, very much inspired from Laravel validation system
  • vue-laravel-errors - A Vue.JS plugin that adds a global mixin which can be used to fill an errors variable from a laravel error response and display it as an object or array, can also be used as a local mixin

# Resize

  • vue-not-visible - Vue directive for removing from dom (like v-if) element on screen smaller than breakpoints.
  • vue-window-size - Provides reactivity window size properties.
  • vue-responsive-text - ↔ Component that scales its child node in relation to its parent node's width

# Scroll

Set window scroll position

  • vue-chat-scroll - Automatic scroll-to-bottom directive for Vue.js 2.0.
  • vue-scrollto - Adds a directive that listens for click events and scrolls to elements.
  • vue-next-level-scroll - A component based and SSR ready approach to smooth scrolling using the modern Scroll behavior API
  • vue-scroll-sync - A component that synchronizes containers’ scroll positions
  • v-scroll-lock - A Vue.js directive for body scroll locking without breaking scrolling of a target element
  • vue2-perfect-scrollbar - PerfectScrollbar minimalistic wrapper
  • vue-scroll-to - Adds a directive that listens for click events and scrolls to elements.
  • vue-scroll-progressbar - A customizable component that indicates the scroll relative position in a progressbar.
  • vue-backtotop - A Back-to-top component for Vue.js, which scroll page to the top when clicked.

Virtual scrollbar

  • VBar - The virtual responsive cross-browser scrollbar component for Vue.js 2x.
  • Vuebar - Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies.
  • vue-detached-scrollbar - A simple scrollbar that can be detached from the container it is scrolling.
  • vuescroll - A scrolling plugin based on Vue.js for uniforming the scrolling in PC and mobile.
  • vue-simplebar - Vue.js wrapper for simplebar plugin.
  • smooth-vuebar - Vue directive wrapper for smooth-scrollbar

Detect when components enter viewport

  • vue-scrollview - A component utilizing scoped slots to detect when a vue component enters and leaves the viewport.
  • vue-scrollactive - Adds an active class in a menu item based on the current section in viewport, also scrolling to the section when clicking the menu item.
  • vue-intersect - A Vue component to add intersection-observer to a Vue component or HTML element.
  • vue-scrollmonitor - A Vue plugin to watch visibility state of elements inside viewport with a wide range of browsers supported (use provide/inject so compat vue@2.2.x)
  • vue-stroll - An Awesome CSS3 list scroll effects component for Vue.js 2.x.
  • navscroll-js - Highlights menu items as you scroll, and also scrolls to a section when a menu item clicked. Use as a vue component, a vue directive or with vanilla js.
  • vue-scrollwatch - A light plugin detecting scroll event,customize callback when element enter viewport,expose 'scrollTo' api to scroll to specific element .Using vue directive.
  • vue-check-view - A plugin that checks if element is in viewport. Fast, small, has no dependencies, live demo.
  • vue-stickto - A vue directive that support multiple DOM nodes stick to top automatically
  • vue2-scrollspy - A scrollspy plugin and animated scroll-to.
  • vue-trip-wire - A custom directive for firing functions when an element reaches a designated point in the viewport, with option to import module with globally accessible functions

Customize the scroll behavior

Seamless scrolling

# Routing

# Lazy Load

# Pagination

# Animation

  • vue2-animate - A Vue.js 2.0 port of Animate.css. For use with Vue's built-in transitions.
  • animated-vue - A Vue.js 2.x plugin to easily use Animate.css animations as transitions. As easy as <animated-tada>!
  • vue-lottie - A Vue.js 2.x plugin to render after effects animations based on bodymovin
  • Vueg - Make vue-router have a transition effect / 为 webApp 提供转场特效的开源 Vue 插件
  • v-animate-css - The easiest to implement Vue 2 directive for Animate.css
  • vue-mixin-tween - Mixin factory that adds tweened values to component context for animations
  • v-odometer - Smoothly transitions numbers with ease. Use this library to give your application a smooth animation, only applicable on numbers.
  • vue2-transitions - Reusable Vue 2 transition components
  • vue-overdrive - Super easy magic-move transitions for Vue apps
  • animated-number-vue - Super easy way to animate numbers.
  • vue-typed-js - Typed.js integration to easily create typying animations.
  • vue-parent-change-transition - Enable a child components to animate when it changes the parent.
  • vue-smooth-reflow - Transition an elements reflow in response to data changes.
  • VueTween - Allows components to tween their properties.
  • vue-slide-up-down - Like jQuery's slideUp / slideDown, but for Vue!
  • vue-animejs - Simple anime.js directives for Vue.
  • Eagle.js - Eagle.js is a web-based slideshow framework for Vue.js.
  • vue-pose - Pose for Vue is a declarative motion system that combines the simplicity of CSS transitions with the power and flexibility of JavaScript.
  • vue-slide-up-down-component - It is a simple interface but realizes very flexible and powerful slide animation, for Vue!
  • femtoTween - A minimalistic (zero-dep, less than 1k) tweening library with first-class Vue support
  • vue-sequential-entrance - Plugin for creating elegant sequential animation entrances with a list of elements of your page. Zero effort. Simple and lightweight
  • vue-animate-scroll - Super lightweight way to add CSS animations to elements as they scroll into view.
  • vue-svg-transition - Create 2-state, SVG-powered transitions
  • vue-page-transition - Easy route / page transitions for Vue.js
  • Vuenime - A flexible Vue wrapper for Animejs
  • vue-flipper - A component to flip children with a nice transition
  • v-number - Animated number transition library for Vue.js
  • vue-kinesis - A set of components to create interactive animations

# Meta Tags

Manage meta information in the document head

  • vue-head - Manage the meta information of the head tag, a simple and easy way.
  • vue-meta - Manage page meta info in Vue 2.0 components. SSR + Streaming supported.
  • vue-headful - Set document <title> and meta tags from within your views.
  • vue-simple-headful - Easily set meta-tags with vue.js - a simpler vue-headful alternative with TypeScript support.

# Portal

Move a DOM node to a target DOM node

  • vue-dom-portal - An escape hatch for DOM Elements in Vue.js components.
  • portal-vue - A Vue Plugin to render your component's template anywhere in the DOM (Works on the virtualDOM level, doesn't move nodes within the DOM)

# Filters


  • vue-svgicon - A tool to create svg icon components. (vue 2.x).
  • vue-content-loading - Vue component to easily build (or use presets) SVG loading cards Facebook like.
  • vue-annotator - Annotate page using any SVG Element (rect, polygon, and many more, even HTML Element like canvas if wrapped in foreignObject)
  • vue-svg-sprite - A directive to simply use SVG sprite (vue 2.x).
  • vue-svg-filler - Vue component for custom your svg file (vue 2.x).

# Miscellaneous

# WebGL

# Fullscreen

# Page visibility

# Printing