lepture / awesome-vue

A curated list of awesome things related to Vue.js

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
• Libraries & Plugins
  • Routing
  • Ajax/Data
  • State Management
  • Validation
  • UI Components
  • i18n
  • Examples
  • Boilerplates
  • Scaffolding
  • Integrations
  • General Plugins/Directives
• Projects Using Vue.js
  • Open Source
  • Apps/Websites
  • Interactive Experiences
  • Enterprise Usage

Official Resources

• Official Guide
• API Reference
• GitHub Repo
• Release Notes

External Resources

• Vue.js資料まとめ(for japanese) by @hashrock

Community

• Twitter
• Gitter Chat Room
• Official Forum
• vue-requests - 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

• Basic Examples
• Vue.js TodoMVC
  • CoffeeScript Version
• Vue.js HackerNews Clone

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

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: official CLI for scaffolding Vue.js projects.
• vue-loader - Vue component loader for Webpack.
  • vue-loader-example
• vueify - Vue compcomponent transform for Browserify.
  • vueify-example
• vue-devtools - Chrome devtools extension for debugging Vue applications.
• grunt-vueify - Translate .vue files to pure JavaScript, without using Browserify. (Useful for Electron apps)
• vue-compiler - A simple CLI wrapper around vueify
• vue-autocompile - Atom.io package to compile .vue files on save.
• vue-dev-server - A small webpack-based development server for building standalone vue components
• vue-go-cli - a CLI tool for scaffolding new projects generating components, services, and mixins.
• brunch-vue - Adds support to Brunch for pre-compiling single file Vue components.
• vueify-extract-css - Browserify plugin to extract css from Vueify-compiled single file components to a separate css file.
• eslint-plugin-vue - Eslint plugin for .vue files.

Syntax Highlighting

• Sublime Text
• Atom by @hedefalk
• Atom (2) by @CYBAI
• Vim by @darthmall and @posva
• Visual Studio Code by Jim Liu
• Brackets by @pandao
• IntelliJ IDEA / WebStorm by @henjue
• Emacs by @CodeFalling

Snippets

• vue-snippets for Atom.io by @ealves-pt

Libraries & Plugins

• Routing

  • vue-router - Official router for building SPAs. ^{1.0 compatible}
  • Vue page, a routing system based on pagejs by @AlexToudic
  • Vue Lanes, an event-based routing system for Vue by @bpierre
  • Vue route, ng-view inspired routes for Vue by @ayamflow
  • voie — simple router / layout manager inspired by FSMs and ui-router by Boris Okunskiy^1.0

• Ajax/Data

  • vue-resource - AJAX/Resource plugin maintained by the PageKit team. ^{1.0 compatible}
  • vue-async-data - Async data loading plugin ^{1.0 compatible}
  • vue-async-computed - Plugin to support computed properties that are calculated asynchronously. By @foxbenjaminfox

• State Management

  • vuex - Flux/Redux inspired application architecture for Vue.js.
  • revue - Redux binding for Vue by @egoist
  • vue-redux - Redux binding for Vue by @yang-wei
  • vue-freeze - Simple state management whitout bloating API and Concept for Vue by @BosNaufal
  • vue-simple-store - Store Organizer To Simplify Your Stores for Vue By @BosNaufal

• Validation

  • vue-validator - Form validation plugin maintained by @kazupon ^{1.0 compatible}
  • Vue validator by @xrado
  • vue-form by @fergaldoyle ^{1.0 compatible}

• UI Components

  • VueStrap, Bootstrap components built with pure Vue.js by @yuche ^1.0
  • VueBoot, Bootstrap v4 components by @Morgul ^1.0
  • vue-mdl: Reusable Vue.js components using Material Design Lite. By @posva
  • vue-countup: A Vue.js component for the very interesting CountUp.js plugin. ^{1.0 compatible}
  • Vue Tag Editor Component by @hnakamur
  • Vue Crop
  • Vue Typeahead
  • Typed select component by @dgerber
  • vue-select: A Vue.js component implementing the select control with the jQuery select2 plugin. By @Haixing-Hu
  • vue-html-editor: A Vue.js component implementing the HTML editor with the jQuery summernote plugin. By @Haixing-Hu
  • vue-datetime-picker: A Vue.js component implementing the datetime picker control using the Eonasdan's bootstrap datetime picker plugin. By @Haixing-Hu
  • vue-country-select: 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 by @dgerber
  • vue-panel: 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: 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
  • 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
  • Vue YouTube Embed: a directive for Vue.js and YouTube by @kaorun343
  • Vue datepicker: calendar and datepicker component with material design for Vue.js by @hilongjw
  • vue-date-picker: A simple datepicker component for Vue.js by @Bubblings
  • vue-spinner: A collection of loading spinners with Vue.js.
  • vue-image-loader: Async image loader for Vue.js by @eduardostuart
  • Vue-progressbar: A lightweight progress bar for Vue.js by @hilongjw
  • Famous-Vue: Declarative Famous using Vue
  • vue-waterfall: A waterfall layout component for Vue.js by @MopTym
  • vue-charts: A Google Charts plugin for Vue.js by @haydenbbickerton
  • vux: Mobile web UI Components based on Vue and WeUI
  • vue-select: Simple component that implements Select2/Chosen style dropdowns with no dependencies^1.0
  • Vue-slide: A lightweight slide component for Vue.js by @hilongjw
  • Vue-quill: A Vue component implementing the Quill text editor by @brockreece
  • vue-pagenav: A vue pagenav plugin by @zxdong262
  • Vue-calendar: A vue calendar component with less code by cucygh
  • Vue Material Components: Vue.js UI components using materializecss.com by mjanys
  • vue-autocomplete Autocomplete Component for Vue by @BosNaufal
  • vue-loading-bar Youtube Like Loading Bar Component for Vue by @BosNaufal
  • vue-bootstrap-modal Bootstrap style modal component for Vue by @Coffcer
  • vue-comps: A collection of unstyled and unanimated components (side-nav / modal / collapsible / clusterize / dropdown / resize-handle and other)
  • vue-materialize: materializeCss styles and animations for some of vue-comps
  • vue-waves: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

• i18n

  • vue-i18n: Internationalization plugin.
  • vue-i18n: A plugin providing a global interface used to localize internationalized messages used in the
  • vue-locale: Advanced localization support for VueJS
  • vue-jade-editor: a online jade(pug) editor plugin by @zxdong262

• Examples

  • Starter Application with JWT Auth + sample backend API in Laravel
  • Node Webkit + Vue example by @brandonjpierce
  • Vue Samples by @superlloyd
  • HackerNews clone with vue.js + vue-router by @kazupon
  • Electron + Vue example by @bradstewart
  • Single page application example (Vue + Voie) by Boris Okunskiy
  • Begin - Task Manager SPA written in Vue + Lumen by Raj Abishek
  • Vue Mini Shop by BosNaufal
  • Vue SoundCloud by mul14

• Boilerplates

  • Boilerplate for Vue.js plugin by @kazupon
  • Boilerplate for Vue.js & Atom Electron by @rodzzlessa24

• Scaffolding

  • vue-cli: official CLI for scaffolding Vue.js projects.
  • Vue generator: a simple yeoman generator for Vue by @BirdEggegg
  • VENM stack yeoman generator by @jfelsinger
  • Grail Yeoman Generator: a advanced yeoman generator for a modern modular one page web app, extendable with Vue.js alongside other nice tools
  • VuePack: A modern starter for Vue and Webpack by @egoist
  • VueWebgulp: A skeleton app using Vuejs, Gulp, and Webpack by @rodzzlessa24
  • Vuetober: SPA scaffolding for October CMS
  • vue-go-cli - a CLI tool for scaffolding new projects generating components, services, and mixins.
  • Brunch with Vue - A skeleton application utilizing vue, vuex, vue-resource and vue-router.

• Integrations

  • Vue for Meteor by @zhouzhuojie
  • ScalaJS bindings for Vue.js by @fancellu
  • Socketize Backend: Sync your model data to Socketize backend automatically. By @Socketize
  • Vue-Meteor-Data Two-way-reactivity mixin for Vue and Meteor by @JakobRosenberg
  • Vue Proerty Decorator: Property Decorators for Vue.js by @kaorun343

• General Plugins/Directives

  • vue-element: Register real custom elements with Vue.
  • vue-touch: Hammer.js wrapper directives for touch gestures. (Updated for 1.0!)
  • vue-animated-list: A Vue.js plugin for easily animating v-for rendered lists.
  • Vue placeholder directives by @lithiumjake
  • Vue in viewport detection directive by @holic
  • Vue once directive by @kewah
  • Vue Modified Directive by @KyleRoss
  • Maintain scroll position on page changes by @mark-hahn
  • vue-titlecase: A plugin providing a global filter and an instance method used to titlecase (different from capitalize) strings. By @Haixing-Hu
  • vue-format: A plugin providing a global filter and an instance method used to format messages with arguments. By @Haixing-Hu application. By @Haixing-Hu
  • vue-clickaway: Assign a method to be called whenever user clicks away from the element. By @simplesmiler
  • vue-focus: Manage input focus in the MVVM-friendly way. By @simplesmiler
  • vue-transfer-dom: Transfer DOM to another location. by @rhyzx
  • vue-lazyload: lazyloading images. by @hilongjw
  • v-touch: The easiest way to use Hammer.js with Vue.js and use touch gestures. by @didierfranc ^{Vue.js 1.x}
  • vue-mixins A collection of mixins aimed to replace some jQuery functionality
  • vue-filters A collection of filters
  • vue-round-filter filter for rounding with whichever decimal accuracy
  • vue-paginate A simple plugin to use pagination in vue.js. by @TahaSh
  • vue-super A simple plugin to call methods on parent components.
  • vue-deepstream Plugin to simplify event subscription and event trigger when using deepstream.io
  • vue-plain Plugin to get plain object from vue getter/setter object.
  • vue-calc-input Vue directive to make a calculator input behavior by @BosNaufal
  • vue-move-dom Vue Directive to move the DOM without losing all the VM data, event, etc. by @BosNaufal
  • vue-animate: Use Animate.css with Vue.js transitions. By @haydenbbickerton
  • vue-sortable: A lightweight directive for reorderable drag-and-drop lists using RubaXa/Sortable. By @sagalbot
  • vue-loading: Vue directive, show loading block in any element. By @coffcer
  • vue-gesture:touch events plugin for Vue.js.You can v-gesture directive,and directive auguments can use a tap, swipe, etc.
  • vue-lazyload-img another image lazyload plugin for Vue, especially optimized for mobile browser. By @JALBAA

• Talks

  • Vue unit tests by coulix

Projects Using Vue.js

• Open Source

  • PageKit ^[Source]
  • p5.js editor ^[Source]
  • Python China ^[Source]
  • npmcharts.com ^[Source]
  • Todolist by @jiyinyiyong
  • Dashboard framework by @thelinuxlich
  • a simple notepad
  • FilterBlend: 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 Simple RSS Reader made using atom electron and vue.js.
  • Gokotta: A simple music player built by electron and vue.
  • Coffeebreak Tool for live editing CSS components

• 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
  • Reddit News A browser extension which show notifications and news from reddit
  • Powerpuff Yourself by Cartoon Networks

• Interactive Experiences

  • 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

• Enterprise Usage

  • Alibaba
  • Baidu
  • Sina Weibo
  • Xiaomi
  • Ele.me
  • Optimizely
  • Expedia
  • UCWeb
  • Line
  • Nintendo
  • Celtra
  • Sainsbury's
  • AREX

License