Coder Social home page Coder Social logo

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.



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 phanan avatar S-YOU avatar blake-newman avatar clarkdo avatar Justineo avatar dwelch2344 avatar sodatea avatar HcySunYang avatar KaelWD avatar shasharoman avatar dsonet avatar nickmessing avatar znck avatar ulivz avatar


Eduardo Teles avatar lan avatar  avatar  avatar Ben Siebert avatar  avatar Ink33 avatar Michael Sokolov avatar  avatar Sebazz avatar  avatar  avatar TheLeCrafter avatar Abdelrhman Said avatar Jason avatar Monish avatar 安南枫 avatar Joshua Daniel Walker avatar  avatar  avatar Reinger Dewit avatar Kulad Angie avatar  avatar Romahuera Kiley avatar Grant Williamson avatar DWH84 avatar  avatar Strosin Annabell avatar  avatar renkunx avatar Von Chanel avatar  avatar Emiliano Córdoba avatar  avatar Erick avatar  avatar Heaney Lazaro avatar Alfred Jophy avatar  avatar Goldner Sean avatar Rath Tabiha avatar Luis Morales Marquez avatar Junsung Ko avatar liuhanfei avatar Dillon Modine-Thuen avatar  avatar Boyer Kenny avatar Murazik Unique avatar Berhard Calotta avatar Kozey Devyn avatar Simon  Mpanji Chiti avatar Bernhard Addie avatar Oscar Alderete avatar Paolo Galletta avatar Victor avatar  avatar Philip avatar Xenza avatar Gilason Elinor avatar Giovani Eduardo avatar Yost Linwood avatar Karan Agrawal avatar Zallom avatar  avatar Hickle Ruben avatar Samuel Rigaud avatar  avatar HaSh avatar Nemanja Bjelic avatar Leandro Millie avatar 李嘉铖 avatar  avatar mwt avatar xiaozhang avatar  avatar Trần Quang Huy avatar  avatar  avatar  avatar  avatar  avatar Chris Jia avatar  avatar Xinming Yang avatar Wouter Alberts avatar awei9527 avatar  avatar HZXJY avatar Winnie33 avatar  avatar  avatar  avatar 余墨残香独自敛 avatar Joel avatar  avatar Lucy Chiang avatar Andras Sadikrama avatar  avatar Rhuan Chaves avatar AriesTriputranto 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 Abd Shomad avatar Khang Pham avatar David Turton avatar Dinesh Puspparajah 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 Linker Lin avatar Eugene Trounev avatar Derek avatar Denny Crall 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 N. 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

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.

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.


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

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...

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


  • style design
  • home redesign
  • live examples

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.

remove contextual bindings

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

allow custom binding prefix

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



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


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 () {
    // ...

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.


should be able to include partial templates...

Like this:

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

Or like this:


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.

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.

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.


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

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 '#'

VM $[event methods]

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

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


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


  • 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

Additional extensions

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

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


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.

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.