Coder Social home page Coder Social logo

vuejs / vue Goto Github PK

View Code? Open in Web Editor NEW
199.7K 6.1K 32.0K 30.84 MB

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Home Page:

License: MIT License

JavaScript 1.82% HTML 0.94% Shell 0.04% CSS 0.59% TypeScript 96.62%
vue javascript frontend framework

vue's Introduction

Vue logo

Build Status Coverage Status Downloads Version License Chat

This repo is for Vue 2

You are looking at the repository for Vue 2. The repo for Vue 3 is vuejs/core.


Vue.js is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome backers. If you'd like to join them, please consider sponsor Vue's development.

Special Sponsor

special sponsor appwrite



Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. It is designed from the ground up to be incrementally adoptable, and can easily scale between a library and a framework depending on different use cases. It consists of an approachable core library that focuses on the view layer only, and an ecosystem of supporting libraries that helps you tackle complexity in large Single-Page Applications.

Browser Compatibility

Vue.js supports all browsers that are ES5-compliant (IE8 and below are not supported).


Project Status Description
vue-router vue-router-status Single-page application routing
vuex vuex-status Large-scale state management
vue-cli vue-cli-status Project scaffolding
vue-loader vue-loader-status Single File Component (*.vue file) loader for webpack
vue-server-renderer vue-server-renderer-status Server-side rendering support
vue-class-component vue-class-component-status TypeScript decorator for a class-based API
vue-rx vue-rx-status RxJS integration
vue-devtools vue-devtools-status Browser DevTools extension


To check out live examples and docs, visit


For questions and support please use the official forum or community chat. The issue list of this repo is exclusively for bug reports and feature requests.


Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.


Detailed changes for each release are documented in the release notes.

Stay In Touch


Please make sure to read the Contributing Guide before making a pull request. If you have a Vue-related project/component/tool, add it with a pull request to this curated list!

Thank you to all the people who already contributed to Vue!



Copyright (c) 2013-present, Yuxi (Evan) You

vue's People


yyx990803 avatar vue-bot avatar Hanks10100 avatar posva avatar defcc avatar kazupon avatar pikax avatar ktsn avatar HerringtonDarkholme avatar javoski avatar dependabot[bot] avatar jkzing avatar gebilaoxiong avatar Kingwl avatar Jinjiang avatar chrisvfritz avatar Justineo avatar phanan avatar S-YOU avatar blake-newman avatar clarkdo avatar sodatea avatar dwelch2344 avatar KaelWD avatar HcySunYang avatar shasharoman avatar dsonet avatar nickmessing avatar znck avatar ulivz avatar


DO KHANH TOAN avatar Petros Karagiannidis avatar  avatar  avatar Vicente Medina avatar lujunji avatar wangxuan avatar  avatar  avatar Adrien Sylvestre avatar  avatar Dyva Agna avatar JY-H avatar Halis Başar Tiftik avatar  avatar  avatar  avatar 司楠 avatar 王辉 avatar Muhammad Jahangeer Shams avatar  avatar JaepaL avatar David Ketchel avatar Joshua Yoder avatar 容俺想想 avatar Alex avatar Kaplan Arkan avatar F. FERNANDES avatar Abdelilah Saouiri avatar Aydoğan avatar  avatar Dan avatar Hamed Mahmoudkhani avatar Oby Magid avatar Jesus avatar Mulxx avatar wannabefree avatar  avatar Mofeng avatar Jotaro Matsuzaki avatar Анна Жарова avatar Tomáš Klement avatar  avatar Bohdan-Belei avatar 任金伟 avatar  avatar  avatar  avatar  avatar lI1jing avatar 静雨 avatar  avatar  avatar  avatar imcuer avatar Theresa W Chavez Theresa avatar  avatar  avatar Mihir Chakma avatar 飞彼易驭心 avatar  avatar Qiu Zhong avatar li.bingbing avatar  avatar  avatar Endy Zhou avatar Dikaa avatar  avatar glory avatar Philippe SEGATORI avatar s. avatar Ahmed Swerky avatar  avatar  avatar  avatar  avatar Maurice avatar  avatar  avatar Artem avatar gjc avatar Dharmendra Kumar avatar nisoojadhav avatar  avatar Santiago avatar  avatar Greg Gunner avatar 莫循 avatar Sparklingman avatar UrNoob avatar  avatar Asaduzzaman Sarker avatar 道山 avatar  avatar TuLing avatar Ken Dawson avatar Nicholas Robinson avatar  avatar Ahmad Alghali avatar Guillaume GUYO avatar


Ivan Kozik avatar Jonathan Lahijani avatar Will Chang avatar Terry Tai avatar Marcin Stefaniak avatar Khang Toh avatar arden avatar Kris Hedges avatar 吴少斌 avatar Stig Kleppe-Jørgensen avatar Khang Pham avatar David Turton avatar Dinesh Pushparajah avatar azu avatar Yasumasa Ashida avatar zbage avatar  avatar Solaiman Shaikh avatar tell-k avatar Renato Marinho avatar Tony Trinh avatar  avatar Gonzalo Ruben Benitez avatar jimxl avatar XQ Kuang avatar James Young avatar Halo Master avatar Eugene Trounev avatar Derek avatar Daidai Xiao avatar moyashi avatar alberto.garcia avatar Chun-Ping (Jeremy) Chang avatar Matt Tyson avatar Noam  Vergain avatar Ford Guo avatar Jeff Fox avatar Jasper Poppe avatar Alex Ausch avatar Yu Xie avatar Ross Mahony avatar Matthew Pietz avatar kazuya kawaguchi avatar Bruno Campos avatar Abhijeet Kaulgud avatar  avatar Markus Geiger avatar Jawf avatar Marek Dajnowski avatar Maciej Kuś avatar Greco Shi avatar  avatar Raul Fortes avatar 简单框架(马克) avatar Thiago Reis avatar  avatar Steve O'Brien avatar Disa Johnson avatar Joel Mandell avatar Aaron Law avatar jlw123199 avatar GQ Lewis avatar AsO avatar Jae Lee (pronounced as Jay) avatar Max Castro avatar Chinedu Okonkwo avatar 大鹏 avatar Masao Ochi avatar Kxllen Xu avatar takeratta(tm)* avatar Tobias Sailer avatar bihicheng avatar Jason Kende avatar SpartanPHP avatar 遣唐君 avatar Michael Russell avatar Victor Roșu avatar  avatar Hiroki K avatar  avatar Gopal Patel avatar 大鼻子 avatar Taobility avatar flossy avatar Hugues Brunelle avatar James Augustus Hall avatar Stef avatar David Arturo Carrillo Atondo avatar Gavin Henry avatar junlei zhang avatar Reggie Zhang avatar Wolfgang Born avatar Mehdi Rande avatar Chandra Patni avatar Marco Verdecchia avatar evandrix avatar  avatar kenny avatar Paul Matunog avatar 阿杰 avatar

vue's Issues


This should be a separate module.

  • parse stuff on hash change / history push
  • can build on top of an existing router component, e.g. page.js
  • store parsed data somewhere
  • ViewModels automatically observes $route if the router is present.

Additional extensions

This is a far reach, God knows when will I get to these.

  • seed-restful
  • seed-tailbone
  • seed-firebase

Observer rewrite

  • Currently child objects nested under an observed object cannot be observed again... The proper way to do it is probably make EVERY object self-contained with an __observer__ and propagate the events up.
  • This would make data objects completely decoupled from each other and allow a VM to simply observe its scope instead of copying stuff over.


Rip out the default filters into a separate module. Basic case transforms can be done with CSS since we are IE9+; More complicated filters are better customized anyway.

batch value updates asynchronously

  • implementation
  • unit test for batch.js
  • fix functional tests

Pseudo code

  • for each created binding, give it a uid;
  • on each binding update
    • check its uid in the global update hash.
      • if not waiting for update
        • push itself to a global update stack
        • if a nextTick stack flush callback is not registered, register it;
      • set its uid to true in the global update hash.
  • in the flush callback, update every binding in the queue.

template that makes more sense

template should simply be a string. the VM constructor makes real nodes out of it and then cache it for future instantiation, because cloneNode() is faster than innerHTML. So - remove util.collectTemplates() and let the users handle where/how to store templates. This also allows better capsulation for component distribution.

make conditional output work in dep tracking


ok ? yesMsg : noMsg

With the current deps tracking, because of the short-circuiting of the ternary expression, if ok is true then only yesMsg gets tracked and we will miss noMsg.


access everything with a var statement...


  • api
    • class Vue
    • instantiation options
    • instance properties
    • instance methods
    • global methods
    • directives
    • filters
  • guide
    • installation
    • getting started
    • displaying a list
    • listening for events
    • Directives in depth
    • Filters in depth
    • computed properties
    • handling forms
    • using transitions
    • composing viewmodels
    • app architecture


  • style design
  • home redesign
  • live examples

VM $[event methods]

provide these methods for nested VMs to communicate with each other (Angular style): $on, $off, $broadcast, $emit


Define a custom element!

Pass in a simple function:

Seed.element('tabs', function (el) {
  // ...

Or pass in a Seed viewmodel constructor / option object:

Seed.element('tabs', {
  tagName: 'ul',
  replace: true,
  template: '...',
  init: function () {
    // ...



  • seed-router as a separate module
  • embedded in core to enable tighter integration with the ViewModel


sd-transition comes in two flavors:

  • CSS class toggle
  • JavaScript functions
  • tests

CSS class toggle

Use sd-transition-class. e.g:

<div class="test" sd-transition-class="fade">
.test {
    transition: opacity .5s linear;
.test.fade {
    opacity: 0;

Custom JavaScript transition functions

Use sd-transition and define them like this:

<div class="test" sd-transition="fade">
Seed.transition('fade',  {
    enter: function (el, attach) {
        // ...
    leave: function (el, detach) {
       // ...

Implementation notes

Transitions are triggered during append/remove operations of the following directives:

  • sd-if
  • sd-repeat (leave via vm.$destroy())
  • sd-show

General procedure:

  • enter
    • set to start state
    • append
    • trigger end state transition on next tick
  • leave
    • trigger start state transition
    • wait transition duration / listen for transitionend
    • remove


use sd-id to be able to reference a child Seed from a parent Seed.


<div id="parent">
    <div sd-id="child" sd-viewmodel="abc"></div>
var parent = new Seed({ el: '#parent' })
// a node with `sd-viewmodel` and `sd-id` both present will
// have its corresponding VM instance registered under parent VM's "$" property
var child = parent.$.child

remove component as pre-processor?

  • pros:
    • slightly smaller code size
    • slightly better performance (no resolving relative require paths on startup, everything is in the same closure)
  • cons:
    • have to avoid naming collisions
    • have to duplicate emitter when used with component


should be able to include partial templates...

Like this:

<div sd-partial="#temp"></div>

Or like this:



This should probably be a separate module / extension / plugin / whatever

Further API improvements

  • change the exposed entity to Seed
  • change sd-each to sd-repeat
  • put all API methods on Seed
  • rename data option to scope
  • rename props option to proto
  • properties that start with _ should also be ignored and used as a convention: $ is library properties, _ is user properties and non-prefixed properties are data.

add `replace` option

This should indicate whether to replace the VM root node being compiled with the template. Only works if the template has only one node.

Component encapsulation (& custom html tags?)

Basically a component can be distributed alone with an extended VM constructor and a template string. So globally there needs to be a method that registers these VMs to a unique id so they can be nested in other views.

Settle down on initialization API

General Thoughts

  • Allow component encapsulation and easy reuse.
  • Flexible while not being too confusing
  • a defined VM constructor should not be able to use a different template for consistency. (i.e. when you new something, it should always look the same) If you want the same logic but a different template, you should extend it as a new VM constructor. Therefore, no more sd-template
  • If you want to inline a template you should use sd-partial.
  • add seed.vm('id', VM) so it can be used inline via sd-vm, id should be no longer an init option.
  • add seed.partial('id', 'partial')

Options Spec for seed.ViewModel.extend

  • el
    • if present
      • if string: querySelector
      • if node: use as is
    • if not
      • create per tagName
    • apply elProps/className etc
  • template
    • if present
      • if starts with '#': getElementById
      • else: use as is
      • replace current el innerHTML
  • id, className, attributes: stuff to add to el (same as Backbone)
  • init: init function to call when instantiating
  • props: stuff that will be put onto the constructor's prototype
  • data: stuff that will be copied to each instance


How can we allow access to nested component VMs in code, while allowing declarative compositing in markup?

  • directives: hash of directives to register
  • filters: hash of filter functions to register
  • vms: hash of VM constructors to register
  • partials: private partials that can be used in the template


Currently I'm torn on how the final API should look like. There are three main references: Angular, Backbone & Ractive.


Markup everything, define everything, bootstrap() once


Creates .el if not exist using options like tagName, properties, etc...


Takes a string template, also allows inline by treating it as an ID if it starts with '#'

allow custom binding prefix

Instead of changing the global/default prefix, allow users to create namespaced directives with their own prefixes.

complete functional tests

Use CasperJS (see travis integration from ghost)

  • simple directive
  • template
  • form elements
  • expressions
  • component encapsulation
  • nested properties
  • nested viewmodels
  • repeated items
  • repeated viewmodels
  • sharing data between viewmodels
  • todomvc

remove contextual bindings

Is contextual bindings really needed any more now that we have expression bindings?
It looks unused in current implementation.

improve Observer performance

When an object is observed by many anonymous expression bindings (>100) the new ViewModel instantiation gets increasingly slow. Currently has no idea why - but it has something to do with the exp parser / anon directive thing. Need to do more profiling.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.