Vue.js is a progressive JavaScript framework used for building user interfaces and single-page applications. It is designed to be incrementally adoptable, meaning that it can be used for more than just the interface layer of an application. Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
Reactive Data Binding
Vue.js offers a reactive and composable data binding system. When the state of the application changes, the view automatically updates to reflect the new state.
{"html": "<div id='app'>{{ message }}</div>", "javascript": "var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })"}Components
Vue allows developers to build encapsulated and reusable components, which can have their own state and methods. These components can be composed to build complex user interfaces.
{"javascript": "Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' })"}Directives
Vue provides a set of built-in directives such as v-if, v-for, v-bind, and v-on, which offer functionality to HTML templates, allowing for declarative rendering and handling of user interactions.
{"html": "<p v-if='seen'>Now you see me</p>", "javascript": "new Vue({ el: '#app', data: { seen: true } })"}Transition Effects
Vue has a transition system that can apply automatic transition effects when elements are inserted, updated, or removed from the DOM. This feature allows for adding interactive and engaging animations to the UI.
{"html": "<transition name='fade'><p v-if='show'>Hello Vue!</p></transition>", "javascript": "new Vue({ el: '#app', data: { show: true } })"}Vuex for State Management
For larger applications, Vue can be used with Vuex, a state management pattern and library that helps manage state outside of Vue components for more complex applications.
{"javascript": "const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment: state => state.count++ } })"}Vue Router for Single Page Applications
Vue Router is the official router for Vue.js, which makes it easy to build single-page applications with Vue by allowing different views to be mapped to different paths.
{"javascript": "const router = new VueRouter({ routes: [{ path: '/foo', component: Foo }, { path: '/bar', component: Bar }] })"}React is a JavaScript library for building user interfaces, maintained by Facebook. It focuses on a component-based architecture like Vue but uses a different syntax called JSX for combining markup with JavaScript. React also has a larger ecosystem and more extensive community support.
Angular is a platform and framework for building single-page client applications using HTML and TypeScript. It is maintained by Google and offers a comprehensive solution with a wide range of features out of the box, including dependency injection, templating, AJAX handling, and more. It is considered to be more opinionated and has a steeper learning curve compared to Vue.
Svelte is a relatively new framework that shifts much of the work to compile time, producing highly optimized vanilla JavaScript at the end. Unlike Vue, which updates the DOM in response to state changes, Svelte writes code that surgically updates the DOM when the state of the app changes.
Ember.js is an opinionated framework for building ambitious web applications. It provides a strong convention-over-configuration philosophy and comes with its own router and state management solutions. Ember is known for its powerful CLI and is often compared to Angular in terms of its all-in-one approach.
Vue.js is an MIT-licensed open source project. It's an independent project with its ongoing development made possible entirely thanks to the support by these awesome backers. If you'd like to join them, please consider:
Funds donated via Patreon goes directly to support Evan You's full-time work on Vue.js. Funds donated via OpenCollective are managed with transparent expenses and will be used for compensating work and expenses by core team members or sponsoring community events. Your name/logo will receive proper recognition and exposure by donating on either platform.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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.
Vue.js supports all browsers that are ES5-compliant (IE8 and below are not supported).
| Project | Status | Description |
|---|---|---|
| vue-router |  | Single-page application routing |
| vuex |  | Large-scale state management |
| vue-cli |  | Project scaffolding |
| vue-loader |  | Single File Component (*.vue file) loader for webpack |
| vue-server-renderer |  | Server-side rendering support |
| vue-class-component |  | TypeScript decorator for a class-based API |
| vue-rx |  | RxJS integration |
| vue-devtools |  | Browser DevTools extension |
To check out live examples and docs, visit vuejs.org.
For questions and support please use the 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.
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
FAQs
The progressive JavaScript framework for building modern web UI.
We found that vue demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."