Vue Demo
This example demonstrates handling user input with the v-on directive.
Preview
Code
<script>
export default {
data() {
return {
message: 'Hello World!',
show: true,
list: [1, 2, 3]
}
},
methods: {
reverseMessage() {
this.message = this.message.split('').reverse().join('')
},
notify() {
alert('navigation was prevented.')
}
}
}
</script>
<div>
<h1>{{ message }}</h1>
<button @click="reverseMessage">Reverse Message</button>
<button @click="message += '!'">Append "!"</button>
<a href="https://vuejs.org" @click.prevent="notify">
A link with e.preventDefault()
</a>
<hr>
<button @click="show = !show">Toggle List</button>
<button @click="list.push(list.length + 1)">Push Number</button>
<button @click="list.pop()">Pop Number</button>
<button @click="list.reverse()">Reverse List</button>
<hr>
<ul v-if="show && list.length">
<li v-for="item of list">{{ item }}</li>
</ul>
<p v-else-if="list.length">List is not empty, but hidden.</p>
<p v-else>List is empty.</p>
<hr>
</div>
<style scoped>
button, a {
display: block;
margin-bottom: 1em;
}
</style>What license does Vue use?
Vue is a free and open source project released under the MIT License.
What browsers does Vue support?
The latest version of Vue (3.x) only supports browsers with native ES2015 support. This excludes IE11. Vue 3.x uses ES2015 features that cannot be polyfilled in legacy browsers, so if you need to support legacy browsers, you will need to use Vue 2.x instead.
Is Vue reliable?
Vue is a mature and battle-tested framework. It is one of the most widely used JavaScript frameworks in production today, with over 1.5 million users worldwide, and is downloaded close to 10 million times a month on npm.
Vue is used in production by renowned organizations in varying capacities all around the world, including Wikimedia Foundation, NASA, Apple, Google, Microsoft, GitLab, Zoom, Tencent, Weibo, Bilibili, Kuaishou, and many more.
Is Vue fast?
Vue 3 is one of the most performant mainstream frontend frameworks, and handles most web application use cases with ease, without the need for manual optimizations.
In stress-testing scenarios, Vue outperforms React and Angular by a decent margin in the js-framework-benchmark. It also goes neck-and-neck against some of the fastest production-level non-Virtual-DOM frameworks in the benchmark.
Do note that synthetic benchmarks like the above focus on raw rendering performance with dedicated optimizations and may not be fully representative of real-world performance results. If you care more about page load performance, you are welcome to audit this very website using WebPageTest or PageSpeed Insights. This website is powered by Vue itself, with SSG pre-rendering, full page hydration and SPA client-side navigation. It scores 100 in performance on an emulated Moto G4 with 4x CPU throttling over slow 4G networks.
You can learn more about how Vue automatically optimizes runtime performance in the Rendering Mechanism section, and how to optimize a Vue app in particularly demanding cases in the Performance Optimization Guide.
Is Vue lightweight?
When you use a build tool, many of Vue's APIs are "tree-shakable". For example, if you don't use the built-in <Transition> component, it won't be included in the final production bundle.
A hello world Vue app that only uses the absolutely minimal APIs has a baseline size of only around 16kb, with minification and brotli compression. The actual size of the application will depend on how many optional features you use from the framework. In the unlikely case where an app uses every single feature that Vue provides, the total runtime size is around 27kb.
When using Vue without a build tool, we not only lose tree-shaking, but also have to ship the template compiler to the browser. This bloats up the size to around 41kb. Therefore, if you are using Vue primarily for progressive enhancement without a build step, consider using petite-vue (only 6kb) instead.
Some frameworks, such as Svelte, use a compilation strategy that produces extremely lightweight output in single-component scenarios. However, our research shows that the size difference heavily depends on the number of components in the application. While Vue has a heavier baseline size, it generates less code per component. In real-world scenarios, a Vue app may very well end up being lighter.
Does Vue scale?
Yes. Despite a common misconception that Vue is only suitable for simple use cases, Vue is perfectly capable of handling large scale applications:
Single-File Components provide a modularized development model that allows different parts of an application to be developed in isolation.
Composition API provides first-class TypeScript integration and enables clean patterns for organizing, extracting and reusing complex logic.
Comprehensive tooling support ensures a smooth development experience as the application grows.
Lower barrier to entry and excellent documentation translate to lower onboarding and training costs for new developers.