Git Product home page Git Product 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.

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


 avatar  avatar Sümeyye Nur Nehir avatar Kamal Upreti avatar Jimmy avatar Vilius avatar Abdul Kader avatar  avatar Dark Moon avatar tony liu avatar Mohsen Saeidi avatar Candy Ho avatar  avatar Vitalii Honcharuk avatar Sabri Monaf Sabri avatar  avatar  avatar  avatar Omar Hamed Sedki avatar  avatar Ilya  avatar  avatar  avatar Sindou avatar zhangyexing avatar  avatar zhaoss avatar dungld avatar Choi Sanghyeok avatar Enrique Rodriguez López avatar Giannis Danousis avatar Loic LL avatar Chase William avatar Igor Lubura avatar Kevin T avatar Guilherme Felix avatar imanmalekian31 avatar Maza avatar Jonathan Matthew Beck avatar Muhammad ahmad  avatar Benoît KOPP avatar Raju Khunt avatar Adrian Solumsmo avatar Puvanesh avatar yardBaldy avatar Joel Lim avatar XAN avatar Gilbert Ng’andu avatar Jake Morris avatar Antonio Sansotta avatar Farid avatar Martin Labrecque avatar Bill Rimell avatar Roshan Jameer Shaik avatar Jay Evans avatar weiqiwang avatar  avatar Bruno Ferreira avatar tiger avatar  avatar 程序员鲸鸟 avatar  avatar Simon Edwards avatar  avatar  avatar Teoman Tuncer avatar Denzell Griffith avatar  avatar Alyson Farias avatar  avatar Daniel Nathan avatar  avatar 大新 avatar  avatar  avatar Fabrizio Corbacio avatar Jan Dorn avatar  avatar mohsen abrishami avatar  avatar PJ Satur avatar ariya shahhoseini avatar  avatar admindex avatar KMX avatar  avatar Jørgen Kalsnes Hagen avatar Dejorden Moerman avatar  avatar  avatar Martynas Aliukevicius avatar  avatar slmowan avatar  avatar Vlad avatar 镇康 avatar  avatar  avatar  avatar Levi van Noort 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



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

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.


  • style design
  • home redesign
  • live examples

remove contextual bindings

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


  • 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


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.

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.


should be able to include partial templates...

Like this:

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

Or like this:


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.

allow custom binding prefix

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

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.

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

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

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

VM $[event methods]

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


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


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


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.

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.

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

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.


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

Additional extensions

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

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

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.

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.