mirror of
https://github.com/vuejs/awesome-vue.git
synced 2025-02-10 15:34:40 -05:00
First set of working revamp
This commit is contained in:
An Phan
parent
ab34a44edd
commit
c6d650c694
41 changed files with 808 additions and 2894 deletions
3
.babelrc
Normal file
3
.babelrc
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"presets": ["es2015"]
|
||||
}
|
||||
2
.editorconfig
Normal file
2
.editorconfig
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
indent_style = space
|
||||
indent_size = 2
|
||||
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.DS_Store
|
||||
node_modules/
|
||||
dist/
|
||||
npm-debug.log
|
||||
471
README.md
471
README.md
|
|
@ -1,467 +1,18 @@
|
|||
<p align="center">
|
||||
<br>
|
||||
<img width="400" src="https://rawgit.com/vuejs/awesome-vue/master/logo.png" alt="awesome">
|
||||
<br>
|
||||
<br>
|
||||
</p>
|
||||
|
||||
## Awesome Vue.js [](https://github.com/sindresorhus/awesome)
|
||||
# awesome-vue
|
||||
|
||||
> A curated list of awesome things related to Vue.js
|
||||
|
||||
- [Official Resources](#official-resources)
|
||||
- [External Resources](#external-resources)
|
||||
- [Community](#community)
|
||||
- [Podcasts](#podcasts)
|
||||
- [Official Examples](#official-examples)
|
||||
- [Tutorials](#tutorials)
|
||||
- [Development Tools](#development-tools)
|
||||
- [Syntax Highlighting](#syntax-highlighting)
|
||||
- [Snippets](#snippets)
|
||||
- [Autocomplete](#autocomplete)
|
||||
- [Component Collections](#component-collections)
|
||||
- [Libraries & Plugins](#libraries--plugins)
|
||||
- [Routing](#routing)
|
||||
- [Ajax/Data](#ajaxdata)
|
||||
- [State Management](#state-management)
|
||||
- [Validation](#validation)
|
||||
- [UI Components](#ui-components)
|
||||
- [i18n](#i18n)
|
||||
- [Examples](#examples)
|
||||
- [Boilerplates](#boilerplates)
|
||||
- [Scaffolding](#scaffolding)
|
||||
- [Integrations](#integrations)
|
||||
- [General Plugins/Directives](#general-pluginsdirectives)
|
||||
- [SEO](#seo)
|
||||
- [Projects Using Vue.js](#projects-using-vuejs)
|
||||
- [Open Source](#open-source)
|
||||
- [Apps/Websites](#appswebsites)
|
||||
- [Interactive Experiences](#interactive-experiences)
|
||||
- [Enterprise Usage](#enterprise-usage)
|
||||
## Build Setup
|
||||
|
||||
### Official Resources
|
||||
``` bash
|
||||
# install dependencies
|
||||
npm install
|
||||
|
||||
- [Official Guide](http://vuejs.org/guide/)
|
||||
- [API Reference](http://vuejs.org/api/)
|
||||
- [**GitHub Repo ★20,319**](https://github.com/vuejs/vue)
|
||||
- [Release Notes](https://github.com/vuejs/vue/releases)
|
||||
# serve with hot reload at localhost:8080
|
||||
npm run dev
|
||||
|
||||
### External Resources
|
||||
# build for production with minification
|
||||
npm run build
|
||||
```
|
||||
|
||||
- [Vue.js資料まとめ(for japanese)](https://gist.github.com/hashrock/f575928d0e109ace9ad0) by @hashrock
|
||||
|
||||
### Community
|
||||
|
||||
- [Twitter](https://twitter.com/vuejs)
|
||||
- [Gitter Chat Room](https://gitter.im/vuejs/vue)
|
||||
- [Official Forum](http://forum.vuejs.org/)
|
||||
- [vue-requests ★25](https://github.com/vuejs/vue-requests) - Request a Vue.js module you wish existed or get ideas for modules
|
||||
|
||||
### Podcasts
|
||||
|
||||
- [Full Stack Radio #30 (11-23-2015)](http://www.fullstackradio.com/30)
|
||||
- [JavaScript Jabber #187 (11-25-2015)](https://devchat.tv/js-jabber/187-jsj-vue-js-with-evan-you)
|
||||
- [Changelog #184 (11-27-2015)](https://changelog.com/184/)
|
||||
- [Software Engineering Daily (12-29-2015)](http://softwareengineeringdaily.com/2015/12/29/front-end-javascript-with-evan-you/)
|
||||
- [Javascript Air 016 (03-30-2016)](https://javascriptair.com/episodes/2016-03-30/)
|
||||
|
||||
### Official Examples
|
||||
|
||||
- [Basic Examples](http://vuejs.org/guide/)
|
||||
- [Vue.js TodoMVC](https://github.com/vuejs/vue/tree/dev/examples/todomvc)
|
||||
- [CoffeeScript Version ★3](https://github.com/anfelor/TodoMVC-CoffeeScript-and-Vue.js)
|
||||
- [**Vue.js HackerNews Clone ★908**](https://github.com/vuejs/vue-hackernews)
|
||||
|
||||
### Tutorials
|
||||
|
||||
- [Vue.js screencasts](https://laracasts.com/series/learning-vue-step-by-step) on Laracasts
|
||||
- [What's New in Vue.js 1.0](http://www.sitepoint.com/whats-new-in-vue-js-1-0/) on Sitepoint
|
||||
- [Build an App with Vue.js: From Authentication to Calling an API](https://auth0.com/blog/2015/11/13/build-an-app-with-vuejs/) on Auth0 blog
|
||||
- [Create a GitHub File Explorer Using Vue.js](https://scotch.io/tutorials/create-a-github-file-explorer-using-vue-js) on Scotch.io
|
||||
- [Vue.js Tutorial](http://vegibit.com/vue-js-tutorial/) on Vegibit
|
||||
- [Vue.js build set-up from scratch with webpack, vue-loader and hot reload](http://skyronic.com/2015/12/28/vue-project-scratch/)
|
||||
- [Vuex basics: Tutorial and explanation](http://skyronic.com/2016/01/03/vuex-basics-tutorial/)
|
||||
- [Vuex introduction video - James Browne from London Vue.js Meetup #1](https://www.youtube.com/watch?v=l1KHL-TX3qs)
|
||||
- [Vue.js 中文系列视频教程](https://laravist.com/series/vue-js-1-0-in-action-series) on Laravist
|
||||
- [Vue.js: The Basics](http://coligo.io/vuejs-the-basics/) on Coligo.io
|
||||
- [Practical Intro to Components in Vue.js](http://coligo.io/vuejs-components) on Coligo.io
|
||||
- [Develop a Reactive Invoice App using Vue.js](http://craigmckenna.com/develop-a-reactive-invoice-app-using-vue-js/) on craigmckenna.com
|
||||
- [Understanding Filters in Vue.js](http://coligo.io/vuejs-filters/) on Coligo.io
|
||||
- [Hybrid App Example with Laravel and Vue.js in portuguese](https://www.youtube.com/watch?v=TGSJjDahlrQ) by @vedovelli
|
||||
- [Creating a Markdown Editor with VueJs and GitHub's API](http://coligo.io/markdown-editor-vuejs/) on Coligo.io
|
||||
- [Building a Real-Time Web Analytics Dashboard with NodeJs, Socket.io, and VueJs](http://coligo.io/real-time-analytics-with-nodejs-socketio-vuejs/) on Coligo.io
|
||||
- [Vue.js Introduction Turkish Language](http://oguzhan.in/vue-js-ile-uygulama-gelistirme/) on oguzhan.in
|
||||
- [Vue.js VideoTutoral Series in Spanish (3-8-2016)](https://www.youtube.com/watch?v=IlFk3cyRB0Y&list=PLM-Y_YQmMEqD2EWfWpSbiV3WgShRRW3FE&index=7) on YouTube by Juan Andrés Núñez
|
||||
- [Building a Bookmarking App with Electron, VueJs, and Firebase](http://coligo.io/bookmarking-app-electron-vuejs-firebase/) on Coligo.io
|
||||
- [Learn Vuex by Building a Notes App](https://coligo.io/learn-vuex-by-building-notes-app/) on Coligo.io
|
||||
- [Vue.js Screencast Series in Spanish](https://styde.net/curso-de-vue-js/) on Styde.net
|
||||
- [讲解Vue.js 官网 中文-含代码、百度云、youtube] (https://github.com/bhnddowinf/vuejs-learn) on bhnddowinf
|
||||
|
||||
#### 0.12 and earlier
|
||||
|
||||
- [Vue.js screencasts](https://laracasts.com/series/learning-vuejs) on Laracasts <sup>0.12</sup>
|
||||
- [Build an App with Vue.js](https://scotch.io/tutorials/build-an-app-with-vue-js-a-lightweight-alternative-to-angularjs) on Scotch.io <sup>0.12</sup>
|
||||
- [Getting Started with Vue.js](http://www.sitepoint.com/getting-started-with-vue-js/) on Sitepoint <sup>0.12</sup>
|
||||
- [Vue.js video series in portuguese](http://forum.vuejs.org/topic/49/vue-js-video-series-in-portuguese) <sup>0.12</sup>
|
||||
- [Vue.js video series in russian](http://ausite.ru/category/js/vue-js) on Ausite <sup>0.12</sup>
|
||||
- [A Quick Introduction to Vue.js](http://mattsparks.com/a-quick-introduction-to-vue-js/) by Matt Sparks <sup>0.12</sup>
|
||||
- [Getting Started with Vue.js + vue-router](https://www.youtube.com/watch?v=QN7l3ydXvx0) by Michael Calkins <sup>0.12</sup>
|
||||
- [Many JS Frameworks but Vue.js Is Different](http://taha-sh.com/blog/many-js-frameworks-but-vuejs-is-different) by Taha Shashtari <sup>0.12</sup>
|
||||
- [Getting Started with Vue.js - AngularJS perspective](http://fadeit.dk/blog/post/getting-started-with-vuejs-angularjs-perspective) by Dan Mindru <sup>0.11</sup>
|
||||
|
||||
### Development Tools
|
||||
|
||||
- [**vue-cli ★569**](https://github.com/vuejs/vue-cli): official CLI for scaffolding Vue.js projects.
|
||||
- [**vue-loader ★453**](https://github.com/vuejs/vue-loader) - Vue component loader for Webpack.
|
||||
- [**vueify ★409**](https://github.com/vuejs/vueify) - Vue component transform for Browserify.
|
||||
- [**vue-devtools ★589**](https://github.com/vuejs/vue-devtools) - Chrome devtools extension for debugging Vue applications.
|
||||
- [grunt-vueify ★1](https://github.com/SkewedAspect/grunt-vueify) - Translate `.vue` files to pure JavaScript, without using Browserify. (Useful for Electron apps)
|
||||
- [vue-compiler ★2](https://github.com/paulpflug/vue-compiler) - A simple CLI wrapper around vueify
|
||||
- [vue-autocompile](https://atom.io/packages/vue-autocompile) - Atom.io package to compile `.vue` files on save.
|
||||
- [vue-dev-server ★3](https://github.com/paulpflug/vue-dev-server) - A small webpack-based development server for building standalone `vue` components
|
||||
- [vue-go-cli ★2](https://github.com/rodzzlessa24/vue-go-cli) - a CLI tool for scaffolding new projects generating components, services, and mixins.
|
||||
- [brunch-vue ★2](https://github.com/nblackburn/vue-brunch) - Adds support to Brunch for pre-compiling single file Vue components.
|
||||
- [vueify-extract-css ★18](https://github.com/rawcreative/vueify-extract-css) - Browserify plugin to extract css from Vueify-compiled single file components to a separate css file.
|
||||
- [eslint-plugin-vue ★21](https://github.com/Twiknight/eslint-plugin-vue) - Eslint plugin for .vue files.
|
||||
- [vbuild ★59](https://github.com/egoist/vbuild) - Preset build tool for Vue.js apps.
|
||||
- [vue-markdown-loader](https://github.com/QingWei-Li/vue-markdown-loader) Convert Markdown file to Vue Component using markdown-it.
|
||||
|
||||
### Syntax Highlighting
|
||||
|
||||
- [**Sublime Text ★164**](https://github.com/vuejs/vue-syntax-highlight)
|
||||
- [Atom](https://atom.io/packages/language-vue) by @hedefalk
|
||||
- [Atom (2)](https://atom.io/packages/language-vue-component) by @CYBAI
|
||||
- [Vim ★30](https://github.com/posva/vim-vue) by @darthmall and @posva
|
||||
- [Visual Studio Code](https://marketplace.visualstudio.com/items/liuji-jim.vue) by Jim Liu
|
||||
- [Brackets ★6](https://github.com/pandao/brackets-vue) by @pandao
|
||||
- [**IntelliJ IDEA / WebStorm ★135**](https://github.com/henjue/vue-for-idea) by @henjue
|
||||
- [Emacs ★2](https://github.com/CodeFalling/vue-mode) by @CodeFalling
|
||||
- [Visual Studio 2015](https://github.com/madskristensen/VuePack) by @madskristensen
|
||||
|
||||
### Snippets
|
||||
|
||||
- [vue-snippets](https://atom.io/packages/vue-snippets) for Atom.io by [@ealves-pt](https://github.com/ealves-pt)
|
||||
|
||||
### Autocomplete
|
||||
|
||||
- [vue-autocomplete](https://atom.io/packages/vue-autocomplete) for Atom.io by [@ealves-pt](https://github.com/ealves-pt)
|
||||
|
||||
### Component Collections
|
||||
|
||||
- [VueStrap](http://yuche.github.io/vue-strap/), Bootstrap components built with pure Vue.js by @yuche <sup>1.0</sup>
|
||||
- [VueBoot](http://morgul.github.io/vueboot/), Bootstrap v4 components by @Morgul <sup>1.0</sup>
|
||||
- [**vue-mdl ★284**](https://github.com/posva/vue-mdl): Reusable Vue.js components using Material Design Lite. By [@posva](https://github.com/posva)
|
||||
- [Extra Vuestrap components](http://gritcode.github.io/gritcode-components/#/toast), more components built with just B4 and Vue.js, by @kzima <sup>1.0</sup>
|
||||
- [VueStrap Base Components](http://kzima.github.io/vuestrap-base-components/#/accordion), A complete set of Bootstrap 4 web components built with pure Vue.js, by @kzima <sup>1.0</sup>
|
||||
- [**vux ★1,068**](https://github.com/airyland/vux): Mobile web UI Components based on Vue and WeUI
|
||||
- [Vue Material Components](http://appcomponents.org/material-components/): Vue.js UI components using [materializecss.com](http://materializecss.com/) by mjanys
|
||||
- [Vue Upload Component](https://github.com/lian-yue/vue-upload-component/): Vue.js Multiple file upload component support ie9 [lianyue.org](http://www.lianyue.org) by LianYue
|
||||
|
||||
- [vue-comps](https://github.com/vue-comps): A collection of unstyled and unanimated plain vue components
|
||||
- [vue-materialize ★25](https://github.com/paulpflug/vue-materialize): materializeCss styles and animations for `vue-comps`
|
||||
- [vue-clusterize ★18](https://github.com/vue-comps/vue-clusterize): implementation of clusterize.js in vue, invisible pagination
|
||||
- [vue-side-nav](https://github.com/vue-comps/vue-side-nav): responsive, touch enabled side nav
|
||||
- [vue-parallax](https://github.com/vue-comps/vue-parallax): Scrolls a image slower than the window to create a neat optical effect
|
||||
- [vue-zoombox](https://github.com/vue-comps/vue-zoombox): implementation of [zoomerang](https://github.com/yyx990803/zoomerang), Zooms into everything (images, text) - without animations
|
||||
- [vue-icons](https://github.com/vue-comps/vue-icons): webpack based - load only what you need - svg inline icons - font compatible mode - fa, material, mdi and octicons
|
||||
- [keen-ui](https://github.com/JosephusPaye/keen-ui): A collection of essential UI components inspired by Material Design
|
||||
- [material-ui-vue](http://material-ui-vue.jackyang.me/docs/index.html#!/components/badges/badge): materializecss UI components with Vue, by [@jack](https://github.com/JackGit)
|
||||
- [vue-spectre](vace.me/a/vue-spectre/index.html): [github](https://github.com/vace/vue-spectre),spectre components built with Vue.js by @vace <sup>1.0</sup>
|
||||
- [vue-desktop ★100](https://github.com/ElemeFE/vue-desktop): A UI library for building admin panel website, by [@ElemeFE](https://github.com/ElemeFE)
|
||||
- [smart](https://github.com/shenlq/smart): Reusable mobile components based on Vue, by [@shenlq](https://github.com/shenlq)
|
||||
- [vue-admin](https://github.com/fundon/vue-admin): Vue Admin Panel Framework, by [@fundon](https://github.com/fundon)
|
||||
- [vue-material-design](https://github.com/loujiayu/vue-material-design): A set of material components by [@loujiayu](https://github.com/loujiayu)
|
||||
- [mint-ui ★767](https://github.com/ElemeFE/mint-ui): Mobile UI elements for Vue.js, by [@ElemeFE](https://github.com/ElemeFE)
|
||||
|
||||
### Libraries & Plugins
|
||||
|
||||
- #### Routing
|
||||
|
||||
- [**vue-router ★1,076**](https://github.com/vuejs/vue-router) - Official router for building SPAs. <sup>1.0 compatible</sup>
|
||||
- [Vue page ★15](https://github.com/AlexToudic/vue-page), a routing system based on pagejs by @AlexToudic
|
||||
- [Vue Lanes ★19](https://github.com/bpierre/vue-lanes), an event-based routing system for Vue by @bpierre
|
||||
- [Vue route ★70](https://github.com/ayamflow/vue-route), ng-view inspired routes for Vue by @ayamflow
|
||||
- [**voie ★108**](https://github.com/inca/voie) — simple router / layout manager inspired by FSMs and ui-router by [Boris Okunskiy](https://github.com/inca)<sup>1.0</sup>
|
||||
- [vue-script2](https://github.com/taoeffect/vue-script2) - Load route-specific code or vendor scripts with a `<script>`-like tag, by @taoeffect
|
||||
|
||||
- #### Ajax/Data
|
||||
|
||||
- [**vue-resource ★1,162**](https://github.com/vuejs/vue-resource) - AJAX/Resource plugin maintained by the [PageKit](http://pagekit.com/) team. <sup>1.0 compatible</sup>
|
||||
- [**vue-async-data ★174**](https://github.com/vuejs/vue-async-data) - Async data loading plugin <sup>1.0 compatible</sup>
|
||||
- [vue-async-computed ★15](https://github.com/foxbenjaminfox/vue-async-computed) - Plugin to support computed properties that are calculated asynchronously. By [@foxbenjaminfox](https://github.com/foxbenjaminfox)
|
||||
- [vue-model](https://github.com/aarondfrancis/vue-model) - Plugin to make rich models with built-in HTTP actions by [@aaronfrancis](https://github.com/aarondfrancis)
|
||||
|
||||
- #### State Management
|
||||
|
||||
- [**vuex ★1,200**](https://github.com/vuejs/vuex) - Flux/Redux inspired application architecture for Vue.js.
|
||||
- [**revue ★159**](https://github.com/revue/revue) - Redux binding for Vue by @egoist
|
||||
- [vue-redux ★74](https://github.com/yang-wei/vue-redux) - Redux binding for Vue by @yang-wei
|
||||
- [vue-freeze ★29](https://github.com/BosNaufal/vue-freeze) - Simple state management whitout bloating API and Concept for Vue by [@BosNaufal](https://github.com/BosNaufal)
|
||||
- [vue-simple-store ★25](https://github.com/BosNaufal/vue-simple-store) - Store Organizer To Simplify Your Stores for Vue By [@BosNaufal](https://github.com/BosNaufal)
|
||||
|
||||
- #### Validation
|
||||
|
||||
- [**vue-validator ★538**](https://github.com/vuejs/vue-validator) - Form validation plugin maintained by @kazupon <sup>1.0 compatible</sup>
|
||||
- [Vue validator ★34](https://github.com/xrado/vue-validator) by @xrado
|
||||
- [**vue-form ★105**](https://github.com/fergaldoyle/vue-form) by @fergaldoyle <sup>1.0 compatible</sup>
|
||||
- [Vuex Validator](https://github.com/sebastian-software/vuex-validator) - Validator library for simple and complex state validation by @sebastiansoft <sup>1.0 compatible</sup>
|
||||
|
||||
- #### UI Components
|
||||
|
||||
- [vue-countup ★8](https://github.com/samcrosoft/vue-countup): A Vue.js component for the very interesting [CountUp.js](https://inorganik.github.io/countUp.js/) plugin. <sup>1.0 compatible</sup>
|
||||
- [Vue Tag Editor Component ★19](https://github.com/hnakamur/vue.tag-editor.js) by @hnakamur
|
||||
- [Vue Crop](http://pespantelis.github.io/vue-crop/)
|
||||
- [Vue Typeahead](http://pespantelis.github.io/vue-typeahead/)
|
||||
- [Typed select component ★3](https://github.com/dgerber/vue-select-js) by @dgerber
|
||||
- [vue-select ★45](https://github.com/Haixing-Hu/vue-select): A Vue.js component implementing the select control with the [jQuery select2 plugin](https://github.com/select2/select2). By @Haixing-Hu
|
||||
- [vue-html-editor ★55](https://github.com/Haixing-Hu/vue-html-editor): A Vue.js component implementing the HTML editor with the [jQuery summernote plugin](https://github.com/summernote/summernote). By @Haixing-Hu
|
||||
- [vue-datetime-picker ★54](https://github.com/Haixing-Hu/vue-datetime-picker): A Vue.js component implementing the datetime picker control using the [Eonasdan's bootstrap datetime picker plugin](https://github.com/Eonasdan/bootstrap-datetimepicker). By @Haixing-Hu
|
||||
- [vue-country-select ★11](https://github.com/Haixing-Hu/vue-country-select): A Vue.js component implementing the select control used to select countries. It depends on [vue-select](https://github.com/Haixing-Hu/vue-select) and [vue-i18n](https://github.com/Haixing-Hu/vue-i18n). By @Haixing-Hu
|
||||
- [Form generation from JSON Schema ★19](https://github.com/dgerber/vue-formidable) by @dgerber
|
||||
- [vue-panel ★36](https://github.com/ericmcdaniel/vue-panel): A suite of Vue.js components for building Flexbox layouts by @ericmcdaniel
|
||||
- [vue-google-maps](https://github.com/GuillaumeLeclerc/vue-google-maps/): A suite of Vue.js components to build reactive Google Maps Applications by @GuillaumeLeclerc
|
||||
- [vue-transition ★34](https://github.com/Twiknight/vue-transition): A component to trigger a CSS transition at any time by @Twiknight
|
||||
- [SVG icons](http://kzima.github.io/vuestrap-icons/#/icons), SVG sprites in form of a simple `<icon>` component, by @kzima <sup>1.0</sup>
|
||||
- [Vue YouTube Embed ★16](https://github.com/kaorun343/vue-youtube-embed): a component for Vue.js and YouTube by @kaorun343
|
||||
- [Vue datepicker ★48](https://github.com/hilongjw/vue-datepicker): calendar and datepicker component with material design for Vue.js by @hilongjw
|
||||
- [vue-date-picker ★16](https://github.com/Bubblings/vue-date-picker): A simple datepicker component for Vue.js by @Bubblings
|
||||
- [**vue-spinner ★131**](https://github.com/greyby/vue-spinner): A collection of loading spinners with Vue.js.
|
||||
- [vue-image-loader ★14](https://github.com/eduardostuart/vue-image-loader): Async image loader for Vue.js by @eduardostuart
|
||||
- [Vue-progressbar ★36](https://github.com/hilongjw/vue-progressbar): A lightweight progress bar for Vue.js by @hilongjw
|
||||
- [Famous-Vue ★10](https://github.com/irwansyahwii/Famous-Vue): Declarative Famous using Vue
|
||||
- [**vue-waterfall ★206**](https://github.com/MopTym/vue-waterfall): A waterfall layout component for Vue.js by @MopTym
|
||||
- [vue-charts ★17](https://github.com/haydenbbickerton/vue-charts): A Google Charts plugin for Vue.js by [@haydenbbickerton](https://github.com/haydenbbickerton)
|
||||
- [**vue-select ★155**](https://github.com/sagalbot/vue-select): Simple component that implements Select2/Chosen style dropdowns with no dependencies<sup>1.0</sup>
|
||||
- [Vue-slide ★29](https://github.com/hilongjw/vue-slide): A lightweight slide component for Vue.js by @hilongjw
|
||||
- [Vue-quill ★5](https://github.com/CroudSupport/vue-quill): A Vue component implementing the [Quill](https://github.com/quilljs/quill.git) text editor by @brockreece
|
||||
- [vue-pagenav ★6](https://github.com/zxdong262/vue-pagenav): A vue pagenav plugin by [@zxdong262](https://github.com/zxdong262)
|
||||
- [Vue-calendar ★1](https://github.com/cucygh/vue-calendar): A vue calendar component with less code by cucygh
|
||||
- [vue-autocomplete ★22](https://github.com/BosNaufal/vue-autocomplete) Autocomplete Component for Vue by [@BosNaufal](https://github.com/BosNaufal)
|
||||
- [vue-loading-bar ★26](https://github.com/BosNaufal/vue-loading-bar) Youtube Like Loading Bar Component for Vue by [@BosNaufal](https://github.com/BosNaufal)
|
||||
- [vue-bootstrap-modal ★5](https://github.com/Coffcer/vue-bootstrap-modal) Bootstrap style modal component for Vue by [@Coffcer](https://github.com/Coffcer)
|
||||
- [vue-waves ★3](https://github.com/Teddy-Zhu/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
|
||||
- [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](https://github.com/xiaokaike/vue-color), Color picker
|
||||
- [vue-avatar](https://github.com/eliep/vue-avatar): display user avatar with fallback to user's initials.
|
||||
- [vue-msui](https://github.com/yjj5855/vue-msui) by [@yjj5855](https://github.com/yjj5855) : A Vue modal
|
||||
- [vue-file-base64](https://github.com/BosNaufal/vue-file-base64) - Vue Component for Converting File to base64 by [@BosNaufal](https://github.com/BosNaufal)
|
||||
- [vue-ripple](https://github.com/BosNaufal/vue-ripple) - Vue Component to Make Google Material Design Ripple Effect by [@BosNaufal](https://github.com/BosNaufal)
|
||||
- [vue-scrollbar](https://github.com/BosNaufal/vue-scrollbar) - The Simplest Scroll Area Component with custom scrollbar for Vue by [@BosNaufal](https://github.com/BosNaufal)
|
||||
- [vue-tagsinput](https://github.com/Ginhing/vue-tagsinput): A tags input component based on Vue.js
|
||||
- [vue-markdown](https://github.com/miaolz123/vue-markdown): A Powerful and Highspeed Markdown Parser for Vue. By [@miaolz123](https://github.com/miaolz123)
|
||||
- [vue-awesome](https://github.com/Justineo/vue-awesome): Font Awesome component for Vue.js, using inline SVG. By [@Justineo](https://github.com/Justineo)
|
||||
- [vue-smoothscroll](https://github.com/Teddy-Zhu/vue-smoothscroll):scroll website smoothly , By [@Teddy-Zhu](https://github.com/Teddy-Zhu)
|
||||
- [vue-breadcrumbs](https://github.com/samturrell/vue-breadcrumbs): Implements simple breadcrumb functionality with vue-router. By [@SamTurrell](https://github.com/samturrell)
|
||||
- [vue-datepicker](https://github.com/weifeiyue/vue-datepicker): datepicker component for Vue.js. By [@weifeiyue](https://github.com/weifeiyue)
|
||||
- [vue-timeago](https://github.com/egoist/vue-timeago): A timeago component for Vue by [@EGOIST](https://github.com/egoist)
|
||||
- [vue-calendar](https://github.com/ihanyang/vue-calendar): Vue Material date picker for Vue by [@ihanyang](https://github.com/ihanyang)
|
||||
- [vue-multiselect](https://github.com/monterail/vue-multiselect): Configurable dropdown/select component similar to Select2/Chosen, with NO dependecies by [@shentao](https://github.com/shentao)
|
||||
- [vue-infinite-loading ★7](https://github.com/PeachScript/vue-infinite-loading): An infinite loading/scroll plugin for Vue.js, support any scrollable element. By [@PeachScript](https://github.com/PeachScript)
|
||||
- [vue-swipe](https://github.com/ElemeFE/vue-swipe): touch slider component for Vuejs [@ElemeFE](https://github.com/ElemeFE)
|
||||
- [vue-loadmore](https://github.com/ElemeFE/vue-loadmore): two-direction mobile pull-to-refresh component for Vuejs [@ElemeFE](https://github.com/ElemeFE)
|
||||
- [vue-tree-view](https://github.com/10quality/vue-tree-view): Tree View component for Vuejs [@10quality](https://github.com/10quality)
|
||||
- [vue-swiper](https://github.com/weilao/vue-swiper): Swiper component. Easy to use. [@weilao](https://github.com/weilao)
|
||||
- [vue-peity](https://github.com/fundon/vue-peity): A Vue version of an excellent [peity](https://github.com/benpickles/peity) library for beautiful mini <svg> graphs, by [@fundon](https://github.com/fundon)
|
||||
|
||||
- #### i18n
|
||||
|
||||
- [**vue-i18n ★164**](https://github.com/kazupon/vue-i18n): Internationalization plugin by @kazupon <sup>1.0, 2.0-pre-alpha compatible</sup>
|
||||
- [vue-localize](https://github.com/Saymon-biz/vue-localize): Internationalization plugin for vue.js based applications
|
||||
- [vue-i18n ★32](https://github.com/Haixing-Hu/vue-i18n): A plugin providing a global interface used to localize internationalized messages used in the application. By @Haixing-Hu
|
||||
- [vue-i18n ★5](https://github.com/jinzhe/vue-i18n): Internationalization plugin by @jinzhe<sup>1.x</sup>
|
||||
- [vue-locale ★9](https://github.com/sebastian-software/vue-locale): Advanced localization support for VueJS by @sebastiansoft
|
||||
- [vue-jade-editor ★0](https://github.com/zxdong262/vue-jade-editor): a online jade(pug) editor plugin by [@zxdong262](https://github.com/zxdong262)
|
||||
|
||||
- #### Examples
|
||||
|
||||
- [Starter Application with JWT Auth + sample backend API in Laravel](http://forum.vuejs.org/topic/39/starter-application-with-jwt-auth-sample-backend-api)
|
||||
- [Node Webkit + Vue example ★34](https://github.com/brandonjpierce/node-webkit-boilerplate) by @brandonjpierce
|
||||
- [Vue Samples ★18](https://github.com/superlloyd/VueSamples) by @superlloyd
|
||||
- [HackerNews clone with vue.js + vue-router ★2](https://github.com/kazupon/vue-router-hackernews) by @kazupon
|
||||
- [**Electron + Vue example ★145**](https://github.com/bradstewart/electron-boilerplate-vue) by @bradstewart
|
||||
- [Single page application example (Vue + Voie)](https://github.com/inca/voie-example) by [Boris Okunskiy](https://github.com/inca)
|
||||
- [Begin - Task Manager SPA written in Vue + Lumen ★10](https://github.com/rajabishek/begin) by [Raj Abishek](https://github.com/rajabishek)
|
||||
- [Vue Mini Shop ★10](https://github.com/BosNaufal/vue-mini-shop) by [BosNaufal](https://github.com/BosNaufal)
|
||||
- [Vue SoundCloud ★12](https://github.com/mul14/vue-soundcloud) by [mul14](https://github.com/mul14)
|
||||
- [Feature Requests (Laravel + Vue Combo)](https://github.com/haydenbbickerton/feature-requests-app) by [haydenbbickerton](https://github.com/haydenbbickerton)
|
||||
- [Vue Cookbook (Vue1.0 + express) ★65](https://github.com/yjj5855/node-vue-server-webpack) by [@yjj5855](https://github.com/yjj5855): A demo first screen rendering of a service
|
||||
- [Vuejs Starter Kit] (https://github.com/MetinSeylan/VuejsStarterKit) modern starter kit by [MetinSeylan](https://github.com/MetinSeylan)
|
||||
- [Strong Together](https://github.com/websemantics/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](https://github.com/websemantics)
|
||||
- [vuetest: an ad admin web with user auth, bootstrap ui, uploader, WYSIWYG editor in iframe](https://github.com/sjerrys/vuetest)
|
||||
- [vue-shopping ★105](https://github.com/andylei18/vue-shopping) by [andylei18](https://github.com/andylei18)
|
||||
- [Vue-cnodejs ★962](https://github.com/shinygang/Vue-cnodejs) by [@shinygang](https://github.com/shinygang)
|
||||
|
||||
- #### Boilerplates
|
||||
- [Boilerplate for Vue.js plugin ★16](https://github.com/kazupon/vue-plugin-boilerplate) by @kazupon <sup>vue-cli compatible</sup>
|
||||
- [Boilerplate for Vue.js & Atom Electron ★33](https://github.com/rodzzlessa24/vue-electron) by @rodzzlessa24
|
||||
- [Boilerplate for single page applications](https://github.com/sebastian-software/modern-spa-boilerplate) by @sebastiansoft
|
||||
- [Boilerplate for SPAs use vuex & vue-router ★6](https://github.com/crossjs/plato) by @crossjs
|
||||
- [electron-vue](https://github.com/SimulatedGREG/electron-vue) by @SimulatedGREG
|
||||
|
||||
- #### Scaffolding
|
||||
|
||||
- [**vue-cli ★569**](https://github.com/vuejs/vue-cli): official CLI for scaffolding Vue.js projects.
|
||||
- [Vue generator ★64](https://github.com/BirdEggegg/generator-vuejs): a simple yeoman generator for Vue by @BirdEggegg
|
||||
- [VENM stack yeoman generator ★35](https://github.com/jfelsinger/generator-venm) by @jfelsinger
|
||||
- [Grail Yeoman Generator ★9](https://github.com/mustardamus/generator-grail): a advanced yeoman generator for a modern modular one page web app, extendable with Vue.js alongside other nice tools
|
||||
- [**VuePack ★158**](https://github.com/egoist/vuepack): A modern starter for Vue and Webpack by @egoist
|
||||
- [VueWebgulp ★32](https://github.com/rodzzlessa24/vue-webgulp): A skeleton app using Vuejs, Gulp, and Webpack by @rodzzlessa24
|
||||
- [Vuetober ★21](https://github.com/scottbedard/oc-vuetober-theme): SPA scaffolding for October CMS
|
||||
- [vue-go-cli ★2](https://github.com/rodzzlessa24/vue-go-cli) - a CLI tool for scaffolding new projects generating components, services, and mixins.
|
||||
- [Brunch with Vue ★9](https://github.com/nblackburn/brunch-with-vue) - A skeleton application utilizing vue, vuex, vue-resource and vue-router.
|
||||
|
||||
- #### Integrations
|
||||
|
||||
- [Vue for Meteor ★74](https://github.com/zhouzhuojie/meteor-vue) by @zhouzhuojie
|
||||
- [ScalaJS bindings for Vue.js ★22](https://github.com/fancellu/scalajs-vue) by @fancellu
|
||||
- [Socketize Backend ★6](https://github.com/Socketize/vue.js-plugin): Sync your model data to Socketize backend automatically. By [@Socketize](https://github.com/Socketize)
|
||||
- [Vue-Meteor-Data ★12](https://github.com/Grottolabs/vue-meteor-data) Two-way-reactivity mixin for Vue and Meteor by @JakobRosenberg
|
||||
- [Vue Proerty Decorator ★7](https://github.com/kaorun343/vue-property-decorator): Property Decorators for Vue.js by @kaorun343
|
||||
- [Vue-Typed](https://github.com/budiadiono/vue-typed): The vue-class-component in typescript favor by @budiadiono
|
||||
- [Vue as a Meteor UI layer](https://github.com/Akryum/meteor-vue-component): 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](https://github.com/vuejs/vue-element): Register real custom elements with Vue.
|
||||
- [**vue-touch ★220**](https://github.com/vuejs/vue-touch): Hammer.js wrapper directives for touch gestures. (Updated for 1.0!)
|
||||
- [vue-animated-list ★88](https://github.com/vuejs/vue-animated-list): A Vue.js plugin for easily animating `v-for` rendered lists.
|
||||
- [Vue placeholder directives ★46](https://github.com/lithiumjake/vue-placeholders) by @lithiumjake
|
||||
- [Vue in viewport detection directive ★27](https://github.com/holic/vue-viewport) by @holic
|
||||
- [Vue once directive ★10](https://github.com/kewah/vue-once) by @kewah
|
||||
- [Vue Modified Directive ★10](https://github.com/KyleRoss/vue-modified) by @KyleRoss
|
||||
- [Maintain scroll position on page changes ★16](https://github.com/mark-hahn/vue-keep-scroll) by @mark-hahn
|
||||
- [vue-titlecase ★9](https://github.com/Haixing-Hu/vue-titlecase): A plugin providing a global filter and an instance method used to titlecase (different from capitalize) strings. By @Haixing-Hu
|
||||
- [vue-format ★9](https://github.com/Haixing-Hu/vue-format): A plugin providing a global filter and an instance method used to format messages with arguments. By @Haixing-Hu
|
||||
- [vue-clickaway ★33](https://github.com/simplesmiler/vue-clickaway): Assign a method to be called whenever user clicks away from the element. By @simplesmiler
|
||||
- [vue-focus ★31](https://github.com/simplesmiler/vue-focus): Manage input focus in the MVVM-friendly way. By @simplesmiler
|
||||
- [vue-transfer-dom ★18](https://github.com/rhyzx/vue-transfer-dom): Transfer DOM to another location. by @rhyzx
|
||||
- [vue-lazyload ★60](https://github.com/hilongjw/vue-lazyload): lazyloading images. by @hilongjw
|
||||
- [v-touch ★5](https://github.com/didierfranc/v-touch): The easiest way to use Hammer.js with Vue.js and use touch gestures. by [@didierfranc](https://github.com/didierfranc) <sup>Vue.js 1.x</sup>
|
||||
- [vue-mixins ★9](https://github.com/paulpflug/vue-mixins) A collection of mixins aimed to replace some jQuery functionality
|
||||
- [vue-filters ★2](https://github.com/paulpflug/vue-filters) A collection of filters
|
||||
- [vue-round-filter ★0](https://github.com/rascada/vue-round-filter) filter for rounding with whichever decimal accuracy
|
||||
- [vue-paginate ★40](https://github.com/TahaSh/vue-paginate) A simple plugin to use pagination in vue.js. by @TahaSh
|
||||
- [vue-super ★5](https://github.com/rpkilby/vue-super) A simple plugin to call methods on parent components.
|
||||
- [vue-deepstream ★6](https://github.com/arexio/vue-deepstream) Plugin to simplify event subscription and event trigger when using [deepstream.io](https://deepstream.io/)
|
||||
- [vue-plain ★1](https://github.com/Coffcer/vue-plain) Plugin to get plain object from vue getter/setter object.
|
||||
- [vue-calc-input ★1](https://github.com/BosNaufal/vue-calc-input) Vue directive to make a calculator input behavior by [@BosNaufal](https://github.com/BosNaufal)
|
||||
- [vue-move-dom ★1](https://github.com/BosNaufal/vue-move-dom) Vue Directive to move the DOM without losing all the VM data, event, etc. by [@BosNaufal](https://github.com/BosNaufal)
|
||||
- [vue-animate ★10](https://github.com/haydenbbickerton/vue-animate): Use [Animate.css](https://github.com/daneden/animate.css "Animate.css") with Vue.js transitions. By [@haydenbbickerton](https://github.com/haydenbbickerton)
|
||||
- [vue-sortable ★19](https://github.com/sagalbot/vue-sortable): A lightweight directive for reorderable drag-and-drop lists using [RubaXa/Sortable](https://github.com/RubaXa/Sortable). By [@sagalbot](https://github.com/sagalbot)
|
||||
- [vue-loading ★14](https://github.com/Coffcer/vue-loading): Vue directive, show loading block in any element. By [@coffcer](https://github.com/Coffcer)
|
||||
- [vue-gesture ★6](https://github.com/mlyknown/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 ★6](https://github.com/JALBAA/vue-lazyload-img) another image lazyload plugin for Vue, especially optimized for mobile browser. By [@JALBAA](https://github.com/JALBAA)
|
||||
- [vue-helmet](https://github.com/miaolz123/vue-helmet) : Like [react-helmet](https://github.com/nfl/react-helmet), a HTML head manager for Vue, edit the page title easily. By [@miaolz123](https://github.com/miaolz123)
|
||||
- [vue-socket.io ★37](https://github.com/MetinSeylan/Vue-Socket.io) : [socket.io-client](http://socket.io) plugin for Vuejs, manage socket.io event in Vue vm. By [@MetinSeylan](https://github.com/MetinSeylan)
|
||||
- [vue-clipboard](https://github.com/xiaokaike/vue-clipboard)
|
||||
- [vue-dragula](https://github.com/Astray-git/vue-dragula): Vue wrapper for [dragula](https://github.com/bevacqua/dragula)
|
||||
- [vue-infinite-scroll](https://github.com/ElemeFE/vue-infinite-scroll): infinite scroll directive for Vuejs [@ElemeFE](https://github.com/ElemeFE)
|
||||
- [vue-toast-mobile](https://github.com/ElemeFE/vue-toast-mobile): mobile toast plugin for Vuejs [@ElemeFE](https://github.com/ElemeFE)
|
||||
- [vue-indicator](https://github.com/ElemeFE/vue-indicator): mobile loading indicator plugin for Vuejs [@ElemeFE](https://github.com/ElemeFE)
|
||||
- [vue-msgbox](https://github.com/ElemeFE/vue-msgbox): message box (like Sweet Alert) plugin for Vuejs [@ElemeFE](https://github.com/ElemeFE)
|
||||
- [vue-scroll](https://github.com/suguangwen/vue-scroll): add scroll up function and optimize the origin algorithm. Reference to ElemeFE/vue-infinite-scroll. [@suguangwen](https://github.com/suguangwen)
|
||||
|
||||
- #### SEO
|
||||
|
||||
- [vue-head](https://github.com/ktquez/vue-head) - Manager the meta information of the head tag, a simple and easy way
|
||||
|
||||
- #### Talks
|
||||
|
||||
- [Vue unit tests](http://www.slideshare.net/coulix/vuejs-testing) by [coulix](https://github.com/coulix)
|
||||
|
||||
### Projects Using Vue.js
|
||||
|
||||
- #### Open Source
|
||||
|
||||
- [PageKit](http://pagekit.com/) <sup>[[Source]](https://github.com/pagekit/pagekit)</sup>
|
||||
- [p5.js editor](http://p5js.org/download/) <sup>[[Source]](https://github.com/processing/p5.js-editor)</sup>
|
||||
- [Python China](https://python-china.org) <sup>[[Source]](https://github.com/zerqu/qingcheng)</sup>
|
||||
- [npmcharts.com](http://npmcharts.com) <sup>[[Source]](https://github.com/cheapsteak/npmcharts.com)</sup>
|
||||
- [Todolist ★11](https://github.com/Memkits/todolist) by @jiyinyiyong
|
||||
- [Dashboard framework ★40](https://github.com/thelinuxlich/vue-dashing-js) by @thelinuxlich
|
||||
- [a simple notepad ★43](https://github.com/sapjax/fewords)
|
||||
- [**FilterBlend ★135**](https://github.com/ilyashubin/FilterBlend): CSS blend modes and filters playground by @ilyashubin
|
||||
- [Koel](http://koel.phanan.net): Music streaming server
|
||||
- [Selection Translator](https://chrome.google.com/webstore/detail/ikhdkkncnoglghljlkmcimlnlhkeamad) <sup>[[Source]](https://github.com/lmk123/crx-selection-translate)</sup> A Chrome Extension let browse any language websites has never been easier.
|
||||
- [SwitchHosts](https://oldj.github.io/SwitchHosts/) <sup>[[Source]](https://github.com/oldj/SwitchHosts)</sup> Switch hosts quickly.
|
||||
- [**RSS Reader ★139**](https://github.com/mrgodhani/rss-reader) Simple RSS Reader made using atom electron and vue.js.
|
||||
- [**Gokotta ★124**](https://github.com/Zhangdroid/Gokotta): A simple music player built by electron and vue.
|
||||
- [Coffeebreak ★38](https://github.com/Kocisov/coffeebreak) Tool for live editing CSS components
|
||||
- [BaiduHui: Push Notification - 百度惠：实时推送优惠](https://chrome.google.com/webstore/detail/blcmlhpbpimcnifnkgkfjhhmoolbidik)<sup>[[Source]](https://github.com/DanielZhu/Magnet-baiduhui-chrome-extension)</sup> A Chrome Extension allows user use Baidu-Hui services and recieves the push notification about the latest discount infos.
|
||||
- [CoPilot](http://copilot.mistergf.io/) - An admin portal based on AdminLTE with vue.js integration. <sup>[[Source]](https://github.com/misterGF/CoPilot)</sup>
|
||||
- [Retrospectify](http://pepf.nl/retrospective/)<sup>[[Source]](https://github.com/pepf/retrospectify)</sup> A simple tool for doing collaborative retrospectives in agile teams.
|
||||
- [jade-press](http://jade-press.org/)<sup>[[Source]](https://github.com/jade-press/jade-press)</sup> cms based on mongodb, nodejs, koa, vue and more.
|
||||
- [astralapp](http://astralapp.com/)<sup>[[source]](https://github.com/astralapp/astral)</sup> Organize Your GitHub Stars With Ease.
|
||||
- [liqi.newtab - 利器 · 灵感生成器 New Tab](https://chrome.google.com/webstore/detail/lidppokaooioojchghdjekhcgdjkkohe)<sup>[[Source]](https://github.com/DanielZhu/liqi.io.chrome-newtab.git)</sup> 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](https://spark.laravel.com/)
|
||||
- [Vice Video](https://video.vice.com/)
|
||||
- [Formlets](https://www.formlets.com)
|
||||
- [Laracasts](https://laracasts.com)
|
||||
- [Sainsbury's Entertainment onboarding platform](https://register.sainsburysentertainment.co.uk/)
|
||||
- [CUUSOO](https://cuusoo.com)
|
||||
- [esa.io](https://esa.io/)
|
||||
- [N1.ru](http://n1.ru)
|
||||
- [稀土掘金](http://gold.xitu.io)
|
||||
- [Prague Airport](http://www.prague-airport.com/)
|
||||
- [Expressionery](https://www.expressionery.com)
|
||||
- [BUYIT](http://bt.workswell.com.au) by @[Workswell Australia](http://workswell.com.au)
|
||||
- [Portfolio Site](http://corentinbac.com/) by Corentin Bac
|
||||
- [Compare Prices by Currys & PCWorld](https://play.google.com/store/apps/details?id=uk.co.dixons.compareprices&hl=en)
|
||||
- [Grammarly](https://grammarly.com/) mistake-free writing service
|
||||
- [Laravist](https://laravist.com/)
|
||||
- [Atiiv](https://atiiv.com) An app aimed for personal trainers and their clients.
|
||||
- [Embalses!](http://embalses.azurewebsites.net/) A tool to report water dam level using the U.S. Geological Survey database.
|
||||
- [TravelMap](http://clem.travelmap.fr) A simple way for travellers to create a blog based on a Map
|
||||
- [movienote.org](http://movienote.org) A app which help users maintaining a list about what movie they have watched.
|
||||
- [Proper Cloth Shirt Builder](https://propercloth.com/design-a-shirt) Custom shirt builder
|
||||
- [CheckIt ★0](https://github.com/julesbou/checkit)
|
||||
- [Reddit News ★27](https://github.com/Mati365/reddit-news) A browser extension which show notifications and news from reddit
|
||||
- [Powerpuff Yourself by Cartoon Networks](https://www.powerpuffyourself.com/)
|
||||
- [小桃酱](https://app.xiaotaojiang.com/)
|
||||
- [金哲博客](http://jinzhe.net/)
|
||||
- [cloudradioo](https://github.com/devfake/cloudradioo) Web app that plays randomly all top 50 songs from the soundcloud charts
|
||||
- [Zova](https://zova.com/)
|
||||
- [风投侠](https://vcshare.cn/)
|
||||
- [COPA 2016](http://www.ca2016.com/)
|
||||
- [Subordination](http://subordination.cu.cc/) A desktop app for translating and editing subtitles
|
||||
- [SPA Blog](http://ktquez.surge.sh/) Personal blog and portfolio site [see repository](https://github.com/ktquez/ktquez.com)
|
||||
|
||||
- #### Interactive Experiences
|
||||
|
||||
- [Jean-Pierre Morin | 1700 LAPOSTE](http://1700laposte.com/jean-pierre-morin/) - by Écorce & KFFEIN
|
||||
- [Facebook NewsFeed](https://newsfeed.fb.com/)
|
||||
- [YouTube AdBlitz 2016](https://adblitz.withyoutube.com/#!/advertisers)
|
||||
- [Blood, Sweat and Tools](http://bloodsweatandtools.discovery.ca/gamebench/) - by Jam3, led by @cheapsteak
|
||||
- [Omnisense Experience](http://omnisense.net) - *Awwwards & FWA SOTD, FWA Cutting Edge. Awwwards SOTM nominee.*
|
||||
- [Being the Bear](https://danslapeaudelours.canalplus.fr/en/) - *Awwwards & FWA SOTD, FWA Cutting Edge, Awwwards SOTM nominee.*
|
||||
- [Heineken Star Experience](http://www.starexperience.fr/) - *FWA SOTD.*
|
||||
- [Louis Ansa Website (portfolio)](http://louisansa.com) - *Awwwards SOTD, FWA nominee.*
|
||||
- [Digital For All](http://www.digitalforallnow.com/en/experience)
|
||||
- [Djeco.com](http://www.djeco.com/en)
|
||||
|
||||
- #### Enterprise Usage
|
||||
|
||||
- Alibaba
|
||||
- Baidu
|
||||
- Sina Weibo
|
||||
- Xiaomi
|
||||
- Ele.me
|
||||
- Optimizely
|
||||
- Expedia
|
||||
- UCWeb
|
||||
- Line
|
||||
- Nintendo
|
||||
- Celtra
|
||||
- Sainsbury's
|
||||
- [AREX](https://arex.io/)
|
||||
- DJI
|
||||
|
||||
## License
|
||||
|
||||
[](https://creativecommons.org/publicdomain/zero/1.0/)
|
||||
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
|
||||
|
|
|
|||
50
app/lib/parser.js
Normal file
50
app/lib/parser.js
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
import fs from 'fs'
|
||||
import path from 'path'
|
||||
import yaml from 'js-yaml'
|
||||
import somebody from 'somebody'
|
||||
import chalk from 'chalk'
|
||||
|
||||
const opts = {
|
||||
root: `${process.cwd()}/awesomeness`,
|
||||
output: `${process.cwd()}/app/site/dist/data.js`
|
||||
}
|
||||
|
||||
const json = JSON.stringify(parseDir(opts.root).children)
|
||||
fs.writeFile(opts.output, `window.data = ${json};`, {}, err => {
|
||||
if (err) {
|
||||
console.log(chalk.red(err))
|
||||
return
|
||||
}
|
||||
|
||||
console.log(chalk.green(`Data generated at ${opts.output}.`))
|
||||
})
|
||||
|
||||
function parseDir(filename) {
|
||||
if (filename[0] === '.') {
|
||||
return
|
||||
}
|
||||
|
||||
const stats = fs.lstatSync(filename)
|
||||
const info = {
|
||||
name: path.basename(filename)
|
||||
}
|
||||
|
||||
if (stats.isDirectory()) {
|
||||
info.type = 'group'
|
||||
info.children = fs.readdirSync(filename).map(child => {
|
||||
return parseDir(`${filename}/${child}`)
|
||||
})
|
||||
|
||||
return info
|
||||
}
|
||||
|
||||
if (stats.isFile() && path.extname(filename) === '.md') {
|
||||
info.type = 'item'
|
||||
info.content = yaml.safeLoad(fs.readFileSync(filename, 'utf8'))
|
||||
if (info.content.author) {
|
||||
info.content.author = somebody.parse(info.content.author)
|
||||
}
|
||||
}
|
||||
|
||||
return info
|
||||
}
|
||||
16
app/site/index.html
Normal file
16
app/site/index.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Awesome Vue</title>
|
||||
<meta name="description" content="A curated list of awesome things related to Vue.js">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
|
||||
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
|
||||
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="dist/data.js"></script>
|
||||
<script src="dist/build.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
329
app/site/src/App.vue
Normal file
329
app/site/src/App.vue
Normal file
|
|
@ -0,0 +1,329 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<section class="left">
|
||||
<div class="wrap">
|
||||
<hgroup>
|
||||
<h1><span class="thin">Awesome</span> Vue.js</h1>
|
||||
<h2 class="tagline thin">A curated list of awesome things related to
|
||||
<a href="https://vuejs.org/">Vue.js</a></h2>
|
||||
</hgroup>
|
||||
<form>
|
||||
<label>
|
||||
<input
|
||||
type="search"
|
||||
placeholder="type to filter"
|
||||
v-model="q"
|
||||
id="seachField"
|
||||
autofocus="autofocus">
|
||||
<a :href="`#${q}`"
|
||||
v-show="q.trim()"
|
||||
title="Link to this search"
|
||||
class="link">
|
||||
<i class="fa fa-link"></i>
|
||||
</a>
|
||||
</label>
|
||||
</form>
|
||||
<explore></explore>
|
||||
|
||||
<footer>
|
||||
<a href="https://github.com/vuejs/awesome-vue"
|
||||
title="Contribute on GitHub"
|
||||
class="github">
|
||||
<i class="fa fa-github"></i>
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="right">
|
||||
<div class="wrap">
|
||||
<group v-for="g in groups" :group="g"></group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import { event } from './utils'
|
||||
import group from './components/Group.vue'
|
||||
import explore from './components/Explore.vue'
|
||||
|
||||
export default {
|
||||
components: { group, explore },
|
||||
|
||||
data () {
|
||||
return {
|
||||
groups: window.data,
|
||||
q: ''
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
q() {
|
||||
let q = this.q.trim()
|
||||
|
||||
if (q === 'everything') {
|
||||
q = ''
|
||||
}
|
||||
|
||||
if (!q) {
|
||||
this.groups = window.data
|
||||
return
|
||||
}
|
||||
|
||||
this.groups = this.filter(_.cloneDeep(window.data), q)
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
event.on('tag-selected', tag => {
|
||||
this.q = tag[0]
|
||||
|
||||
// Set the focus into the search field. Some little UX doesn't kill.
|
||||
this.$nextTick(() => {
|
||||
document.getElementById('seachField').focus()
|
||||
})
|
||||
})
|
||||
|
||||
if (window.location.hash) {
|
||||
this.q = /^#(.*)/.exec(window.location.hash)[1].toLowerCase()
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Filter our awesome data.
|
||||
* @param {Array.<Object>} groups The groups to apply filtering on
|
||||
* @param {String} q
|
||||
* @return {Array}
|
||||
*/
|
||||
filter(groups, q) {
|
||||
q = q.toLowerCase()
|
||||
const res = []
|
||||
_.each(groups, g => {
|
||||
// If the group name contains the keyword, it passes the test.
|
||||
if (g.name.toLowerCase().indexOf(q) !== -1) {
|
||||
res.push(g)
|
||||
return
|
||||
}
|
||||
|
||||
// Keep a copy of the original children and work out the filtered ones.
|
||||
const children = g.children
|
||||
g.children = []
|
||||
|
||||
// Recursively process the subgroups, if any.
|
||||
const subGroups = _.filter(children, { type: 'group' })
|
||||
if (subGroups.length) {
|
||||
g.children = this.filter(subGroups, q)
|
||||
}
|
||||
|
||||
// Apply our filter logic on the items.
|
||||
const items = _.filter(children, item => {
|
||||
return item.type === 'item'
|
||||
&& this.buildFilterHaystack(item).indexOf(q) !== -1
|
||||
})
|
||||
|
||||
g.children = _.concat(g.children, items)
|
||||
|
||||
if (g.children.length) {
|
||||
res.push(g)
|
||||
}
|
||||
})
|
||||
|
||||
return res
|
||||
},
|
||||
|
||||
/**
|
||||
* Build a "haystack" of keywords to filter.
|
||||
* @param {Object} item
|
||||
* @return {String}
|
||||
*/
|
||||
buildFilterHaystack(item) {
|
||||
let haystack = ''
|
||||
|
||||
_.each(['name', 'description', 'url'], p => {
|
||||
if (item.content[p]) {
|
||||
haystack += ` ${item.content[p]}`
|
||||
}
|
||||
})
|
||||
|
||||
if (item.content.author) {
|
||||
haystack += ` ${item.content.author.name}`
|
||||
}
|
||||
|
||||
return _.reduce(item.content.tags, (h, tag) => `${h} ${tag}`, haystack)
|
||||
.toLowerCase()
|
||||
.trim()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
body, html {
|
||||
font: 400 15px/22px "Source Sans Pro", sans-serif;
|
||||
color: #34495e;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #3cb982;
|
||||
text-decoration: none;
|
||||
transition: color .3s;
|
||||
|
||||
&:hover {
|
||||
color: darken(#3cb982, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.thin {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.left, .right {
|
||||
width: 50%;
|
||||
padding: 64px;
|
||||
}
|
||||
|
||||
.left {
|
||||
text-align: right;
|
||||
border-right: 1px solid #ebebeb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
background: #fcfcfc;
|
||||
|
||||
hgroup {
|
||||
h1 {
|
||||
font-size: 2.7rem;
|
||||
margin-bottom: 1.6rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 2.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
margin-bottom: 1.2rem;
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
$searchHeight: 36px;
|
||||
|
||||
input[type="search"]::-webkit-search-decoration,
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-results-button,
|
||||
input[type="search"]::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: none;
|
||||
border: 1px solid #ebebeb;
|
||||
height: $searchHeight;
|
||||
line-height: $searchHeight;
|
||||
border-radius: $searchHeight/2;
|
||||
width: 234px;
|
||||
outline: none;
|
||||
background: #fff url(./assets/search.png) 8px no-repeat;
|
||||
background-size: 24px;
|
||||
padding: 0 40px 0 32px;
|
||||
font: 300 1rem "Source Sans Pro", sans-serif;
|
||||
transition: border-color .3s;
|
||||
|
||||
&:focus {
|
||||
border-color: #42b983;
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
background: #42b983;
|
||||
background: linear-gradient(to bottom, #42b983 0%,#2a8f61 100%);
|
||||
color: #fff;
|
||||
height: $searchHeight;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
border-radius: 0 $searchHeight/2 $searchHeight/2 0;
|
||||
line-height: $searchHeight;
|
||||
padding: 0 12px;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(to top, #42b983 0%,#2a8f61 100%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: linear-gradient(to top, #42b983 0%, darken(#2a8f61, 10%) 100%);
|
||||
box-shadow: inset -2px 3px 4px rgba(0,0,0,.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
overflow: auto;
|
||||
|
||||
.wrap {
|
||||
max-width: 480px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes soho {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-8deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 4rem;
|
||||
|
||||
.github {
|
||||
color: #34495e;
|
||||
font-size: 2rem;
|
||||
width: 149px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 27px;
|
||||
background: url(./assets/look-here.png) no-repeat;
|
||||
background-size: 149px;
|
||||
position: absolute;
|
||||
right: -5px;
|
||||
transform: rotate(-4deg);
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
animation: soho 1s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
app/site/src/assets/logo.png
Normal file
BIN
app/site/src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
app/site/src/assets/look-here.png
Normal file
BIN
app/site/src/assets/look-here.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
app/site/src/assets/search.png
Normal file
BIN
app/site/src/assets/search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 KiB |
62
app/site/src/components/Explore.vue
Normal file
62
app/site/src/components/Explore.vue
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<section class="explore">
|
||||
<h1 class="thin">Explore</h1>
|
||||
<ul>
|
||||
<li v-for="tag in coolStuff">
|
||||
<a :href="`#${tag}`"
|
||||
@click="filterByTag(tag)">{{ tag }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { filterByTag } from '../mixins'
|
||||
|
||||
export default {
|
||||
mixins: [filterByTag],
|
||||
|
||||
data() {
|
||||
return {
|
||||
coolStuff: [
|
||||
'tutorials',
|
||||
'official examples',
|
||||
'boilerplates',
|
||||
'websites',
|
||||
'projects using Vue.js',
|
||||
'everything'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.explore {
|
||||
font-size: 1.25rem;
|
||||
|
||||
h1 {
|
||||
margin-bottom: .4rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
max-width: 274px;
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
&::before {
|
||||
content: "·";
|
||||
color: #7f8c8d;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
&:first-child::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
39
app/site/src/components/Group.vue
Normal file
39
app/site/src/components/Group.vue
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<section>
|
||||
<h1>{{ group.name }}</h1>
|
||||
<group v-for="g in subGroups" :group="g"></group>
|
||||
<item v-for="i in items" :item="i.content"></item>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import item from './Item.vue'
|
||||
|
||||
export default {
|
||||
props: ['group'],
|
||||
components: { item },
|
||||
computed: {
|
||||
items() {
|
||||
return _.filter(this.group.children, { type: 'item' })
|
||||
},
|
||||
subGroups() {
|
||||
return _.filter(this.group.children, { type: 'group' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
section {
|
||||
> h1 {
|
||||
font-size: 2rem;
|
||||
margin: 1.5rem 0 1.7rem;
|
||||
}
|
||||
|
||||
> section h1 {
|
||||
font-size: 1.6rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
75
app/site/src/components/Item.vue
Normal file
75
app/site/src/components/Item.vue
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<article>
|
||||
<h1>
|
||||
<a v-if="item.url" :href="item.url">{{ item.name }}</a>
|
||||
<span v-else>{{ item.name }}</span>
|
||||
<span class="author thin" v-if="item.author">by
|
||||
<a v-if="item.author.url" :href="item.author.url">{{ item.author.name }}</a>
|
||||
<template v-else>{{ item.author.name }}</template>
|
||||
</span>
|
||||
</h1>
|
||||
<p class="thin" v-if="item.description">{{ item.description }}</p>
|
||||
<footer class="thin" v-if="item.tags">
|
||||
<ul>
|
||||
<li v-for="tag in item.tags">
|
||||
<a :href="`#${tag}`" @click="filterByTag(tag)">{{ tag }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { filterByTag } from '../mixins'
|
||||
|
||||
export default {
|
||||
props: ['item'],
|
||||
mixins: [filterByTag]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
article {
|
||||
border-bottom: 1px solid #efefef;
|
||||
padding: 17px 0;
|
||||
|
||||
&:first-of-type {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: .5rem;
|
||||
|
||||
&:only-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: .8rem;
|
||||
|
||||
ul {
|
||||
&::before {
|
||||
font-family: FontAwesome;
|
||||
content: "\f02c";
|
||||
color: #7f8c8d;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
&::before {
|
||||
content: "·";
|
||||
color: #7f8c8d;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
&:first-child::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
13
app/site/src/main.js
Normal file
13
app/site/src/main.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import Group from './components/Group.vue'
|
||||
import { event } from './utils'
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App),
|
||||
created() {
|
||||
Vue.component('group', Group)
|
||||
event.init()
|
||||
}
|
||||
})
|
||||
11
app/site/src/mixins/filterByTag.js
Normal file
11
app/site/src/mixins/filterByTag.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import { event } from '../utils'
|
||||
|
||||
const filterByTag = {
|
||||
methods: {
|
||||
filterByTag(tag) {
|
||||
event.emit('tag-selected', tag)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { filterByTag }
|
||||
1
app/site/src/mixins/index.js
Normal file
1
app/site/src/mixins/index.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './filterByTag'
|
||||
23
app/site/src/utils/event.js
Normal file
23
app/site/src/utils/event.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import Vue from 'vue'
|
||||
|
||||
const event = {
|
||||
bus: null,
|
||||
|
||||
init() {
|
||||
if (!this.bus) {
|
||||
this.bus = new Vue()
|
||||
}
|
||||
|
||||
return this.bus
|
||||
},
|
||||
|
||||
emit(name, ...args) {
|
||||
this.bus.$emit(name, args)
|
||||
},
|
||||
|
||||
on(name, func) {
|
||||
this.bus.$on(name, func)
|
||||
}
|
||||
}
|
||||
|
||||
export { event }
|
||||
1
app/site/src/utils/index.js
Normal file
1
app/site/src/utils/index.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './event'
|
||||
BIN
assets/design.psd
Normal file
BIN
assets/design.psd
Normal file
Binary file not shown.
File diff suppressed because it is too large
Load diff
3
awesomeness/Community/forum.md
Normal file
3
awesomeness/Community/forum.md
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
name: Official Forum
|
||||
url: http://forum.vuejs.org/
|
||||
3
awesomeness/Community/gitter.md
Normal file
3
awesomeness/Community/gitter.md
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
name: Gitter Chat Room
|
||||
url: https://gitter.im/vuejs/vue
|
||||
3
awesomeness/Community/twitter.md
Normal file
3
awesomeness/Community/twitter.md
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
name: Twitter
|
||||
url: https://twitter.com/vuejs
|
||||
4
awesomeness/Community/vue-requests.md
Normal file
4
awesomeness/Community/vue-requests.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
name: vue-requests
|
||||
url: https://github.com/vuejs/vue-requests
|
||||
description: Request a Vue.js module you wish existed or get ideas for modules
|
||||
3
awesomeness/Official Resources/api.md
Normal file
3
awesomeness/Official Resources/api.md
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
name: API Reference
|
||||
url: http://vuejs.org/api/
|
||||
3
awesomeness/Official Resources/guide.md
Normal file
3
awesomeness/Official Resources/guide.md
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
name: Official Guide
|
||||
url: http://vuejs.org/guide/
|
||||
3
awesomeness/Official Resources/release-notes.md
Normal file
3
awesomeness/Official Resources/release-notes.md
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
name: Release Notes
|
||||
url: https://github.com/vuejs/vue/releases
|
||||
3
awesomeness/Official Resources/repo.md
Normal file
3
awesomeness/Official Resources/repo.md
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
name: GitHub Repo
|
||||
url: https://github.com/vuejs/vue
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
name: Dashboard Framework
|
||||
url: https://github.com/thelinuxlich/vue-dashing-js
|
||||
author: "@thelinuxlich (https://github.com/thelinuxlich)"
|
||||
description: The dashboard framework Dashing reimplemented in Node.js + Vue.js
|
||||
5
awesomeness/Projects Using Vue.js/Open Source/fewords.md
Normal file
5
awesomeness/Projects Using Vue.js/Open Source/fewords.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
name: fewords
|
||||
url: https://github.com/sapjax/fewords
|
||||
author: "@sapjax (https://github.com/sapjax)"
|
||||
description: A simple notepad that supports Markdown.
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
name: FilterBlend
|
||||
url: https://github.com/ilyashubin/FilterBlend
|
||||
author: "@ilyashubin (https://github.com/ilyashubin/FilterBlend)"
|
||||
description: CSS blend modes and filters playground
|
||||
10
awesomeness/Projects Using Vue.js/Open Source/koel.md
Normal file
10
awesomeness/Projects Using Vue.js/Open Source/koel.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
name: koel
|
||||
url: http://koel.phanan.net
|
||||
author: Phan An (http://phanan.net)
|
||||
description: A personal music streaming server that works.
|
||||
tags:
|
||||
- music
|
||||
- streaming
|
||||
- electron
|
||||
- laravel
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
name: npmcharts
|
||||
url: http://npmcharts.com/
|
||||
author: Chang Wang (https://twitter.com/CheapSteak)
|
||||
description: Compare npm packages and spot download trends.
|
||||
4
awesomeness/Projects Using Vue.js/Open Source/p5js.md
Normal file
4
awesomeness/Projects Using Vue.js/Open Source/p5js.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
name: p5.js Editor
|
||||
url: http://p5js.org/download/
|
||||
description: p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.
|
||||
4
awesomeness/Projects Using Vue.js/Open Source/pagekit.md
Normal file
4
awesomeness/Projects Using Vue.js/Open Source/pagekit.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
name: PageKit
|
||||
url: http://pagekit.com/
|
||||
description: A modern Open Source CMS. Intuitive. Modular. Flexible.
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
name: Python China
|
||||
url: https://python-china.org/
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
name: Todolist
|
||||
url: https://github.com/Memkits/todolist
|
||||
author: "@jiyinyiyong (https://github.com/jiyinyiyong)"
|
||||
description: A stack-based personal Todo app.
|
||||
4
awesomeness/Tutorials/1.0/vuejs-screencasts.md
Normal file
4
awesomeness/Tutorials/1.0/vuejs-screencasts.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
name: Vue.js Screencasts
|
||||
url: https://laracasts.com/series/learning-vue-step-by-step
|
||||
author: Laracasts (http://laracasts.com)
|
||||
4
awesomeness/Tutorials/1.0/whats-new-in-vuejs-10.md
Normal file
4
awesomeness/Tutorials/1.0/whats-new-in-vuejs-10.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
name: What's New in Vue.js 1.0
|
||||
url: http://www.sitepoint.com/whats-new-in-vue-js-1-0/
|
||||
author: Sitepoint
|
||||
32
package.json
Normal file
32
package.json
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"name": "awesome-vue",
|
||||
"description": "A curated list of awesome things related to Vue.js",
|
||||
"author": "An Phan <an@construct.sg>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"parse": "babel-node app/lib/parser.js",
|
||||
"dev": "npm run parse && webpack-dev-server --inline --hot --content-base app/site",
|
||||
"build": "npm run parse && cross-env NODE_ENV=production webpack --progress --hide-modules"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^2.0.0-alpha.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.10.1",
|
||||
"babel-core": "^6.0.0",
|
||||
"babel-loader": "^6.0.0",
|
||||
"babel-preset-es2015": "^6.0.0",
|
||||
"chalk": "^1.1.3",
|
||||
"cross-env": "^1.0.6",
|
||||
"css-loader": "^0.23.1",
|
||||
"file-loader": "^0.8.4",
|
||||
"js-yaml": "^3.6.1",
|
||||
"lodash": "^4.13.1",
|
||||
"node-sass": "^3.8.0",
|
||||
"sass-loader": "^3.2.1",
|
||||
"somebody": "^2.0.0",
|
||||
"vue-loader": "^9.0.0",
|
||||
"webpack": "^1.12.2",
|
||||
"webpack-dev-server": "^1.12.0"
|
||||
}
|
||||
}
|
||||
57
webpack.config.js
Normal file
57
webpack.config.js
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
var path = require('path')
|
||||
var webpack = require('webpack')
|
||||
|
||||
module.exports = {
|
||||
entry: './app/site/src/main.js',
|
||||
output: {
|
||||
path: path.resolve(__dirname, './app/site/dist'),
|
||||
publicPath: '/dist/',
|
||||
filename: 'build.js'
|
||||
},
|
||||
resolveLoader: {
|
||||
root: path.join(__dirname, 'node_modules'),
|
||||
},
|
||||
module: {
|
||||
loaders: [
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue'
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel',
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|gif|svg)$/,
|
||||
loader: 'file',
|
||||
query: {
|
||||
name: '[name].[ext]?[hash]'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
devServer: {
|
||||
historyApiFallback: true,
|
||||
noInfo: true
|
||||
},
|
||||
devtool: '#eval-source-map'
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
module.exports.devtool = '#source-map'
|
||||
// http://vue-loader.vuejs.org/en/workflow/production.html
|
||||
module.exports.plugins = (module.exports.plugins || []).concat([
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.OccurenceOrderPlugin()
|
||||
])
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue