Awesome Vue.js
A curated list of awesome things related to Vue.js
- Official Resources
- External Resources
- Community
- Podcasts
- Official Examples
- Tutorials
- Development Tools
- Syntax Highlighting
- Snippets
- Autocomplete
- Component Collections
- Libraries & Plugins
- Projects Using Vue.js
Official Resources
External Resources
- Vue.js資料まとめ(for japanese) by @hashrock
Community
- Gitter Chat Room
- Official Forum
- vue-requests ★25 - Request a Vue.js module you wish existed or get ideas for modules
Podcasts
- Full Stack Radio #30 (11-23-2015)
- JavaScript Jabber #187 (11-25-2015)
- Changelog #184 (11-27-2015)
- Software Engineering Daily (12-29-2015)
- Javascript Air 016 (03-30-2016)
Official Examples
Tutorials
- Vue.js screencasts on Laracasts
- What's New in Vue.js 1.0 on Sitepoint
- Build an App with Vue.js: From Authentication to Calling an API on Auth0 blog
- Create a GitHub File Explorer Using Vue.js on Scotch.io
- Vue.js Tutorial on Vegibit
- Vue.js build set-up from scratch with webpack, vue-loader and hot reload
- Vuex basics: Tutorial and explanation
- Vuex introduction video - James Browne from London Vue.js Meetup #1
- Vue.js 中文系列视频教程 on Laravist
- Vue.js: The Basics on Coligo.io
- Practical Intro to Components in Vue.js on Coligo.io
- Develop a Reactive Invoice App using Vue.js on craigmckenna.com
- Understanding Filters in Vue.js on Coligo.io
- Hybrid App Example with Laravel and Vue.js in portuguese by @vedovelli
- Creating a Markdown Editor with VueJs and GitHub's API on Coligo.io
- Building a Real-Time Web Analytics Dashboard with NodeJs, Socket.io, and VueJs on Coligo.io
- Vue.js Introduction Turkish Language on oguzhan.in
- Vue.js VideoTutoral Series in Spanish (3-8-2016) on YouTube by Juan Andrés Núñez
- Building a Bookmarking App with Electron, VueJs, and Firebase on Coligo.io
- Learn Vuex by Building a Notes App on Coligo.io
- Vue.js Screencast Series in Spanish on Styde.net
- 讲解Vue.js 官网 中文-含代码、百度云、youtube on bhnddowinf
- Exploring Real Time Apps with VueJS, ES2015 and Webpack on Pusher
0.12 and earlier
- Vue.js screencasts on Laracasts 0.12
- Build an App with Vue.js on Scotch.io 0.12
- Getting Started with Vue.js on Sitepoint 0.12
- Vue.js video series in portuguese 0.12
- Vue.js video series in russian on Ausite 0.12
- A Quick Introduction to Vue.js by Matt Sparks 0.12
- Getting Started with Vue.js + vue-router by Michael Calkins 0.12
- Many JS Frameworks but Vue.js Is Different by Taha Shashtari 0.12
- Getting Started with Vue.js - AngularJS perspective by Dan Mindru 0.11
Development Tools
- vue-cli ★569: official CLI for scaffolding Vue.js projects.
- vue-loader ★453 - Vue component loader for Webpack.
- vueify ★409 - Vue component transform for Browserify.
- vue-devtools ★589 - Chrome devtools extension for debugging Vue applications.
- grunt-vueify ★1 - Translate
.vue
files to pure JavaScript, without using Browserify. (Useful for Electron apps) - vue-compiler ★2 - A simple CLI wrapper around vueify
- vue-autocompile - Atom.io package to compile
.vue
files on save. - vue-dev-server ★3 - A small webpack-based development server for building standalone
vue
components - vue-go-cli ★2 - a CLI tool for scaffolding new projects generating components, services, and mixins.
- brunch-vue ★2 - Adds support to Brunch for pre-compiling single file Vue components.
- vueify-extract-css ★18 - Browserify plugin to extract css from Vueify-compiled single file components to a separate css file.
- eslint-plugin-vue ★21 - Eslint plugin for .vue files.
- vbuild ★59 - Preset build tool for Vue.js apps.
- vue-markdown-loader Convert Markdown file to Vue Component using markdown-it.
Syntax Highlighting
- Sublime Text ★164
- Atom by @hedefalk
- Atom (2) by @CYBAI
- Vim ★30 by @darthmall and @posva
- Visual Studio Code by Jim Liu
- Brackets ★6 by @pandao
- IntelliJ IDEA / WebStorm ★135 by @henjue
- Emacs ★2 by @CodeFalling
- Visual Studio 2015 by @madskristensen
Snippets
- vue-snippets for Atom.io by @ealves-pt
Autocomplete
- vue-autocomplete for Atom.io by @ealves-pt
Component Collections
-
VueStrap, Bootstrap components built with pure Vue.js by @yuche 1.0
-
VueBoot, Bootstrap v4 components by @Morgul 1.0
-
vue-mdl ★284: Reusable Vue.js components using Material Design Lite. By @posva
-
Extra Vuestrap components, more components built with just B4 and Vue.js, by @kzima 1.0
-
VueStrap Base Components, A complete set of Bootstrap 4 web components built with pure Vue.js, by @kzima 1.0
-
vux ★1,068: Mobile web UI Components based on Vue and WeUI
-
Vue Material Components: Vue.js UI components using materializecss.com by mjanys
-
Vue Upload Component: Vue.js Multiple file upload component support ie9 lianyue.org by LianYue
-
vue-comps: A collection of unstyled and unanimated plain vue components
- vue-materialize ★25: materializeCss styles and animations for
vue-comps
- vue-clusterize ★18: implementation of clusterize.js in vue, invisible pagination
- vue-data-table: A high-customizable data-table based on vue-clusterize
- vue-side-nav: responsive, touch enabled side nav
- vue-parallax: Scrolls a image slower than the window to create a neat optical effect
- vue-zoombox: implementation of zoomerang, Zooms into everything (images, text) - without animations
- vue-icons: webpack based - load only what you need - svg inline icons - font compatible mode - fa, material, mdi and octicons
- vue-materialize ★25: materializeCss styles and animations for
-
keen-ui: A collection of essential UI components inspired by Material Design
-
material-ui-vue: materializecss UI components with Vue, by @jack
-
vue-spectre: github,spectre components built with Vue.js by @vace 1.0
-
vue-desktop ★100: A UI library for building admin panel website, by @ElemeFE
-
vue-material-design: A set of material components by @loujiayu
-
mint-ui ★767: Mobile UI elements for Vue.js, by @ElemeFE
-
searchable-select-dropdown: A Vue Component to convert the native html select-dropdown to searchable dropdown by @rahulgaba16
Libraries & Plugins
-
Routing
- vue-router ★1,076 - Official router for building SPAs. 1.0 compatible
- Vue page ★15, a routing system based on pagejs by @AlexToudic
- Vue Lanes ★19, an event-based routing system for Vue by @bpierre
- Vue route ★70, ng-view inspired routes for Vue by @ayamflow
- voie ★108 — simple router / layout manager inspired by FSMs and ui-router by Boris Okunskiy1.0
- vue-script2 - Load route-specific code or vendor scripts with a
<script>
-like tag, by @taoeffect
-
Ajax/Data
- vue-resource ★1,162 - AJAX/Resource plugin maintained by the PageKit team. 1.0 compatible
- vue-async-data ★174 - Async data loading plugin 1.0 compatible
- vue-async-computed ★15 - Plugin to support computed properties that are calculated asynchronously. By @foxbenjaminfox
- vue-model - Plugin to make rich models with built-in HTTP actions by @aaronfrancis
-
State Management
- vuex ★1,200 - Flux/Redux inspired application architecture for Vue.js.
- revue ★159 - Redux binding for Vue by @egoist
- vue-redux ★74 - Redux binding for Vue by @yang-wei
- vue-freeze ★29 - Simple state management whitout bloating API and Concept for Vue by @BosNaufal
- vue-simple-store ★25 - Store Organizer To Simplify Your Stores for Vue By @BosNaufal
-
Validation
- vue-validator ★538 - Form validation plugin maintained by @kazupon 1.0 compatible
- Vue validator ★34 by @xrado
- vue-form ★105 by @fergaldoyle 1.0 compatible
- Vuex Validator - Validator library for simple and complex state validation by @sebastiansoft 1.0 compatible
-
UI Components
- vue-countup ★8: A Vue.js component for the very interesting CountUp.js plugin. 1.0 compatible
- Vue Tag Editor Component ★19 by @hnakamur
- Vue Crop
- Vue Typeahead
- Typed select component ★3 by @dgerber
- vue-select ★45: A Vue.js component implementing the select control with the jQuery select2 plugin. By @Haixing-Hu
- vue-html-editor ★55: A Vue.js component implementing the HTML editor with the jQuery summernote plugin. By @Haixing-Hu
- vue-datetime-picker ★54: A Vue.js component implementing the datetime picker control using the Eonasdan's bootstrap datetime picker plugin. By @Haixing-Hu
- vue-country-select ★11: A Vue.js component implementing the select control used to select countries. It depends on vue-select and vue-i18n. By @Haixing-Hu
- Form generation from JSON Schema ★19 by @dgerber
- vue-panel ★36: A suite of Vue.js components for building Flexbox layouts by @ericmcdaniel
- vue-google-maps: A suite of Vue.js components to build reactive Google Maps Applications by @GuillaumeLeclerc
- vue-transition ★34: A component to trigger a CSS transition at any time by @Twiknight
- SVG icons, SVG sprites in form of a simple
<icon>
component, by @kzima 1.0 - Vue YouTube Embed ★16: a component for Vue.js and YouTube by @kaorun343
- Vue datepicker ★48: calendar and datepicker component with material design for Vue.js by @hilongjw
- vue-date-picker ★16: A simple datepicker component for Vue.js by @Bubblings
- vue-spinner ★131: A collection of loading spinners with Vue.js.
- vue-image-loader ★14: Async image loader for Vue.js by @eduardostuart
- Vue-progressbar ★36: A lightweight progress bar for Vue.js by @hilongjw
- Famous-Vue ★10: Declarative Famous using Vue
- vue-waterfall ★206: A waterfall layout component for Vue.js by @MopTym
- vue-charts ★17: A Google Charts plugin for Vue.js by @haydenbbickerton
- vue-select ★155: Simple component that implements Select2/Chosen style dropdowns with no dependencies1.0
- Vue-slide ★29: A lightweight slide component for Vue.js by @hilongjw
- Vue-quill ★5: A Vue component implementing the Quill text editor by @brockreece
- vue-pagenav ★6: A vue pagenav plugin by @zxdong262
- Vue-calendar ★1: A vue calendar component with less code by cucygh
- vue-autocomplete ★22 Autocomplete Component for Vue by @BosNaufal
- vue-loading-bar ★26 Youtube Like Loading Bar Component for Vue by @BosNaufal
- vue-bootstrap-modal ★5 Bootstrap style modal component for Vue by @Coffcer
- vue-waves ★3:Click effect inspired by Google's Material Design ,the vue version By @Teddy-Zhu
- [vue-table] (https://github.com/ratiw/vue-table): component that will automatically request (JSON) data from the server and display them nicely in html table with swappable/extensible pagination component. By @ratiw
- [vue-tables] (https://github.com/matfish2/vue-tables): This Vue package offers an easy and intuitive way of displaying Bootstrap-styled grids with data coming either from the client or from the server. By @matfish2
- [vue-smart-table] (https://github.com/gurghet/vue-smart-table): Much table, many enterprise, so nested components, wow!
- [fire-select] (https://github.com/firework/fire-select): Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Chosen, Select2, etc.
- vue-color, Color picker
- vue-avatar: display user avatar with fallback to user's initials.
- vue-msui by @yjj5855 : A Vue modal
- vue-file-base64 - Vue Component for Converting File to base64 by @BosNaufal
- vue-ripple - Vue Component to Make Google Material Design Ripple Effect by @BosNaufal
- vue-scrollbar - The Simplest Scroll Area Component with custom scrollbar for Vue by @BosNaufal
- vue-tagsinput: A tags input component based on Vue.js
- vue-markdown: A Powerful and Highspeed Markdown Parser for Vue. By @miaolz123
- vue-awesome: Font Awesome component for Vue.js, using inline SVG. By @Justineo
- vue-smoothscroll:scroll website smoothly , By @Teddy-Zhu
- vue-breadcrumbs: Implements simple breadcrumb functionality with vue-router. By @SamTurrell
- vue-datepicker: datepicker component for Vue.js. By @weifeiyue
- vue-timeago: A timeago component for Vue by @EGOIST
- vue-calendar: Vue Material date picker for Vue by @ihanyang
- vue-multiselect: Configurable dropdown/select component similar to Select2/Chosen, with NO dependecies by @shentao
- vue-infinite-loading ★7: An infinite loading/scroll plugin for Vue.js, support any scrollable element. By @PeachScript
- vue-swipe: touch slider component for Vuejs @ElemeFE
- vue-loadmore: two-direction mobile pull-to-refresh component for Vuejs @ElemeFE
- vue-tree-view: Tree View component for Vuejs @10quality
- vue-swiper: Swiper component. Easy to use. @weilao
- vue-peity: A Vue version of an excellent peity library for beautiful mini graphs, by @fundon
-
i18n
- vue-i18n ★164: Internationalization plugin by @kazupon 1.0, 2.0-pre-alpha compatible
- vue-localize: Internationalization plugin for vue.js based applications
- vue-i18n ★32: A plugin providing a global interface used to localize internationalized messages used in the application. By @Haixing-Hu
- vue-i18n ★5: Internationalization plugin by @jinzhe1.x
- vue-locale ★9: Advanced localization support for VueJS by @sebastiansoft
- vue-jade-editor ★0: a online jade(pug) editor plugin by @zxdong262
- vue-video ★0: A HTML5 video player component for Vue.js by @hilongjw
-
Examples
- Starter Application with JWT Auth + sample backend API in Laravel
- Node Webkit + Vue example ★34 by @brandonjpierce
- Vue Samples ★18 by @superlloyd
- HackerNews clone with vue.js + vue-router ★2 by @kazupon
- Electron + Vue example ★145 by @bradstewart
- Single page application example (Vue + Voie) by Boris Okunskiy
- Begin - Task Manager SPA written in Vue + Lumen ★10 by Raj Abishek
- Vue Mini Shop ★10 by BosNaufal
- Vue SoundCloud ★12 by mul14
- Feature Requests (Laravel + Vue Combo) by haydenbbickerton
- Vue Cookbook (Vue1.0 + express) ★65 by @yjj5855: A demo first screen rendering of a service
- [Vuejs Starter Kit] (https://github.com/MetinSeylan/VuejsStarterKit) modern starter kit by MetinSeylan
- Strong Together - A starter project to build single page Vue.js apps as stand-alone or for Laravel / Laravel Spark projects, based on Browserify and Semantic-ui) by WebSemantics
- vuetest: an ad admin web with user auth, bootstrap ui, uploader, WYSIWYG editor in iframe
- vue-shopping ★105 by andylei18
- Vue-cnodejs ★962 by @shinygang
- vue-zhihu-daily ★357 by hilongjw
-
Boilerplates
- Boilerplate for Vue.js plugin ★16 by @kazupon vue-cli compatible
- Boilerplate for Vue.js & Atom Electron ★33 by @rodzzlessa24
- Boilerplate for single page applications by @sebastiansoft
- Boilerplate for SPAs use vuex & vue-router ★6 by @crossjs
- electron-vue by @SimulatedGREG
-
Scaffolding
- vue-cli ★569: official CLI for scaffolding Vue.js projects.
- Vue generator ★64: a simple yeoman generator for Vue by @BirdEggegg
- VENM stack yeoman generator ★35 by @jfelsinger
- Grail Yeoman Generator ★9: a advanced yeoman generator for a modern modular one page web app, extendable with Vue.js alongside other nice tools
- VuePack ★158: A modern starter for Vue and Webpack by @egoist
- VueWebgulp ★32: A skeleton app using Vuejs, Gulp, and Webpack by @rodzzlessa24
- Vuetober ★21: SPA scaffolding for October CMS
- vue-go-cli ★2 - a CLI tool for scaffolding new projects generating components, services, and mixins.
- Brunch with Vue ★9 - A skeleton application utilizing vue, vuex, vue-resource and vue-router.
-
Integrations
- Vue for Meteor ★74 by @zhouzhuojie
- ScalaJS bindings for Vue.js ★22 by @fancellu
- Socketize Backend ★6: Sync your model data to Socketize backend automatically. By @Socketize
- Vue-Meteor-Data ★12 Two-way-reactivity mixin for Vue and Meteor by @JakobRosenberg
- Vue Proerty Decorator ★7: Property Decorators for Vue.js by @kaorun343
- Vue-Typed: The vue-class-component in typescript favor by @budiadiono
- Vue as a Meteor UI layer: Packages to integrate vue in your meteor project as first-class citizen (with single-file components & apollo support) by @Akryum
-
General Plugins/Directives
- vue-element ★73: Register real custom elements with Vue.
- vue-touch ★220: Hammer.js wrapper directives for touch gestures. (Updated for 1.0!)
- vue-animated-list ★88: A Vue.js plugin for easily animating
v-for
rendered lists. - Vue placeholder directives ★46 by @lithiumjake
- Vue in viewport detection directive ★27 by @holic
- Vue once directive ★10 by @kewah
- Vue Modified Directive ★10 by @KyleRoss
- Maintain scroll position on page changes ★16 by @mark-hahn
- vue-titlecase ★9: A plugin providing a global filter and an instance method used to titlecase (different from capitalize) strings. By @Haixing-Hu
- vue-format ★9: A plugin providing a global filter and an instance method used to format messages with arguments. By @Haixing-Hu
- vue-clickaway ★33: Assign a method to be called whenever user clicks away from the element. By @simplesmiler
- vue-focus ★31: Manage input focus in the MVVM-friendly way. By @simplesmiler
- vue-transfer-dom ★18: Transfer DOM to another location. by @rhyzx
- vue-lazyload ★60: lazyloading images. by @hilongjw
- v-touch ★5: The easiest way to use Hammer.js with Vue.js and use touch gestures. by @didierfranc Vue.js 1.x
- vue-mixins ★9 A collection of mixins aimed to replace some jQuery functionality
- vue-filters ★2 A collection of filters
- vue-round-filter ★0 filter for rounding with whichever decimal accuracy
- vue-paginate ★40 A simple plugin to use pagination in vue.js. by @TahaSh
- vue-super ★5 A simple plugin to call methods on parent components.
- vue-deepstream ★6 Plugin to simplify event subscription and event trigger when using deepstream.io
- vue-plain ★1 Plugin to get plain object from vue getter/setter object.
- vue-calc-input ★1 Vue directive to make a calculator input behavior by @BosNaufal
- vue-move-dom ★1 Vue Directive to move the DOM without losing all the VM data, event, etc. by @BosNaufal
- vue-animate ★10: Use Animate.css with Vue.js transitions. By @haydenbbickerton
- vue-sortable ★19: A lightweight directive for reorderable drag-and-drop lists using RubaXa/Sortable. By @sagalbot
- vue-loading ★14: Vue directive, show loading block in any element. By @coffcer
- vue-gesture ★6:touch events plugin for Vue.js.You can v-gesture directive,and directive auguments can use a tap, swipe, etc.
- vue-lazyload-img ★6 another image lazyload plugin for Vue, especially optimized for mobile browser. By @JALBAA
- vue-helmet : Like react-helmet, a HTML head manager for Vue, edit the page title easily. By @miaolz123
- [vue-socket.io ★40(https://github.com/MetinSeylan/Vue-Socket.io) : socket.io-client plugin for Vuejs, manage socket.io event in Vue vm. By @MetinSeylan
- vue-clipboard
- vue-dragula: Vue wrapper for dragula
- vue-infinite-scroll: infinite scroll directive for Vuejs @ElemeFE
- vue-toast-mobile: mobile toast plugin for Vuejs @ElemeFE
- vue-indicator: mobile loading indicator plugin for Vuejs @ElemeFE
- vue-msgbox: message box (like Sweet Alert) plugin for Vuejs @ElemeFE
- vue-scroll: add scroll up function and optimize the origin algorithm. Reference to ElemeFE/vue-infinite-scroll. @suguangwen
- vue-click-outside: ClickOutside directive for Vue. @fundon
- vue-medium.js: Medium.js directive for Vue. @franzskuffka
-
SEO
- vue-head - Manager the meta information of the head tag, a simple and easy way
-
Talks
Projects Using Vue.js
-
Open Source
- PageKit [Source]
- p5.js editor [Source]
- Python China [Source]
- npmcharts.com [Source]
- Todolist ★11 by @jiyinyiyong
- Dashboard framework ★40 by @thelinuxlich
- a simple notepad ★43
- FilterBlend ★135: CSS blend modes and filters playground by @ilyashubin
- Koel: Music streaming server
- Selection Translator [Source] A Chrome Extension let browse any language websites has never been easier.
- SwitchHosts [Source] Switch hosts quickly.
- RSS Reader ★139 Simple RSS Reader made using atom electron and vue.js.
- Gokotta ★124: A simple music player built by electron and vue.
- Coffeebreak ★38 Tool for live editing CSS components
- BaiduHui: Push Notification - 百度惠:实时推送优惠[Source] A Chrome Extension allows user use Baidu-Hui services and recieves the push notification about the latest discount infos.
- CoPilot - An admin portal based on AdminLTE with vue.js integration. [Source]
- Retrospectify[Source] A simple tool for doing collaborative retrospectives in agile teams.
- jade-press[Source] cms based on mongodb, nodejs, koa, vue and more.
- astralapp[source] Organize Your GitHub Stars With Ease.
- liqi.newtab - 利器 · 灵感生成器 New Tab[Source] A New Tab Chrome Extension gives you a moment to read the good quotations with their recommanded tools which were excerpted from the interviews made by liqi.com, you can always find your favorites.
-
Apps/Websites
- Laravel Spark
- Vice Video
- Formlets
- Laracasts
- Sainsbury's Entertainment onboarding platform
- CUUSOO
- esa.io
- N1.ru
- 稀土掘金
- Prague Airport
- Expressionery
- BUYIT by @Workswell Australia
- Portfolio Site by Corentin Bac
- Compare Prices by Currys & PCWorld
- Grammarly mistake-free writing service
- Laravist
- Atiiv An app aimed for personal trainers and their clients.
- Statamic
- Embalses! A tool to report water dam level using the U.S. Geological Survey database.
- TravelMap A simple way for travellers to create a blog based on a Map
- movienote.org A app which help users maintaining a list about what movie they have watched.
- Proper Cloth Shirt Builder Custom shirt builder
- CheckIt ★0
- Reddit News ★27 A browser extension which show notifications and news from reddit
- Powerpuff Yourself by Cartoon Networks
- 小桃酱
- 金哲博客
- cloudradioo Web app that plays randomly all top 50 songs from the soundcloud charts
- Zova
- 风投侠
- COPA 2016
- Subordination A desktop app for translating and editing subtitles
- SPA Blog Personal blog and portfolio site see repository
- WP ERP An Open Source HR, CRM & Accounting Solution for WordPress powered by Vue.js
-
Interactive Experiences
- Jean-Pierre Morin | 1700 LAPOSTE - by Écorce & KFFEIN
- Facebook NewsFeed
- YouTube AdBlitz 2016
- Blood, Sweat and Tools - by Jam3, led by @cheapsteak
- Omnisense Experience - Awwwards & FWA SOTD, FWA Cutting Edge. Awwwards SOTM nominee.
- Being the Bear - Awwwards & FWA SOTD, FWA Cutting Edge, Awwwards SOTM nominee.
- Heineken Star Experience - FWA SOTD.
- Louis Ansa Website (portfolio) - Awwwards SOTD, FWA nominee.
- Digital For All
- Djeco.com
- Tolks.io - a new way to put stories online.
-
Enterprise Usage
- Alibaba
- Baidu
- Sina Weibo
- Xiaomi
- Ele.me
- Optimizely
- Expedia
- UCWeb
- Line
- Nintendo
- Celtra
- Sainsbury's
- AREX
- DJI