Vue.js sits somewhere between a library you drop onto an existing page and a framework you build a whole product on. One script tag works. So does a full single-page application with routing, a state layer, and a build step.
Evan You built it and still helps steer it. The project has stayed independent open source rather than sitting under a company, which is the main thing separating it from React and Angular. It handles the view layer. Routing and state management live in companion libraries that ship alongside it.
W3Techs put Vue.js on 0.8% of all websites where a JavaScript library is detected, as of September 2026. Apple, IKEA, and Nintendo all run at least part of their public sites on it, per the same source.
What Is Vue.js
Strip the positioning away and you get a progressive JavaScript framework for building interactive user interfaces on the web.
Under the hood it follows the MVVM pattern, which keeps what a user sees separate from the data driving it. Change the data and the interface updates itself. No manual DOM work, no querySelector calls scattered through your code.
Progressive is doing real work in that sentence. A team can add Vue.js to one page with a script tag, or take the same core library and scale it into a full single-page application.
- Adding interactive pieces on top of pages that already exist
- Running a full single-page application end to end
- Bringing reactivity to a server-rendered site without a rewrite
- Prototyping components before anyone commits to a bigger architecture decision
All of that stays on the front-end development side. Data storage and business rules still belong to a backend somewhere.
Adopting it doesn’t require throwing out what already works.
Who Created Vue.js and Who Maintains It
Evan You released the first version in February 2014. He had been working on Angular projects at Google and wanted something lighter, which is a common enough origin story for frameworks but happens to be true here.
Development has stayed in the open on GitHub since then, run by Evan You and a core team of contributors instead of a corporate owner.
The current stable release is Vue 3.5.42, shipping at 33.9 KB minified and gzipped. The core vue package pulls roughly 12 million weekly installs, per npm registry download data. It carries the MIT license, so commercial and private use costs nothing and owes no royalty. Vue.js itself is written in TypeScript.
Release numbers follow semantic versioning. Going from 3.4 to 3.5 means new features that won’t break your code, while a patch like 3.5.42 is bug fixes only. Vue 3.6, built around a new reactivity core and an experimental “Vapor Mode” compiler, was still in release-candidate testing as of September 2026 and had not replaced 3.5 as the stable line.
Alibaba was an early enterprise adopter in China. Evan You has credited that partly to a fully translated Chinese documentation set, plus his own fluency in the language and visibility in that developer community.
What Is a Single-File Component in Vue.js
One .vue file holds one piece of an interface. Markup, logic, and styling in the same place.
That beats hunting through three directories to find every part of a single button, which is what the alternative usually looks like once a codebase gets big.
Vue.js core team benchmarks reported roughly a 44% faster compile time for scripts and templates when generating source maps in Vue 3.4 (Vue Blog, 2023).
Template, Script, and Style Blocks Explained
Each .vue file splits into labeled sections that a build tool compiles into plain JavaScript before the browser sees any of it.
| Block | Contains | Notes |
|---|---|---|
| Template | HTML-based markup and directives | One root section per component |
| Script | Component logic, Options or Composition API | Can use script setup shorthand |
| Style | Component CSS | Scoped attribute limits it to this component |
Scoped styles are the part I’d miss most if I went back. One component’s CSS can’t leak into another, which used to be a reliable source of late-night bugs in older, non-component-based front ends.
How Vue.js Reactivity Works
Reactivity is what makes Vue.js feel responsive without you writing extra code for it.
Vue 3 builds this on native ES6 Proxy objects. The framework wraps your reactive data and tracks exactly which piece of state each component reads while it renders.
Change one of those tracked values later and only the components depending on it re-render. Everything else is left alone.
- ref() wraps a single primitive value, a number or a string, in a reactive container
- reactive() takes a whole object or array and tracks every property inside it
- computed() derives a value from other reactive state, then caches it until one of its dependencies changes
This tracking is what replaced the manual DOM manipulation older jQuery-style code depended on. It’s also why two-way binding through v-model works without you wiring up event listeners by hand.
The core team reported a 56% cut in memory usage from an internal reactivity refactor shipped in Vue 3.5, with no behavior changes for existing apps (Vue Blog, 2024).
Options API vs Composition API in Vue.js
Component logic can be written two ways. Both compile down to the same reactivity system underneath, so mixing styles inside one project is fine.
| Aspect | Options API | Composition API |
|---|---|---|
| Logic organization | Grouped by option type (data, methods, computed) | Grouped by feature, inside setup() |
| Added in | Vue 2, carried into Vue 3 | Vue 3.0, released 2020 |
| Best for | Small components, quick prototypes | Large components with reusable logic |
| TypeScript inference | Workable but limited | More reliable, per Vue’s own release notes |
Options API Structure
A component written with the Options API is one object with named sections. The data section holds reactive state and methods holds functions the template can call. Derived values that cache themselves go in computed, and watch runs code whenever a specific value changes.
Composition API Structure
The Composition API groups that same logic by feature instead, usually inside a setup() function or the shorter script setup syntax.
Vue’s 3.0 release notes describe it as enabling logic composition and reuse similar to how React.js hooks work, though the two frameworks track state differently underneath.
- Logic is easier to pull out and reuse across components
- Related code sits together instead of being split by option type
Type inference is far more reliable here too, which matters for teams that keep a TypeScript cheat sheet open while typing props and emits.
How Vue.js Renders and Updates the DOM
The Vue.js core team clocked its rewritten template parser at roughly twice the speed of the previous version after the Vue 3.4 release (Vue Blog, 2023).
Templates compile ahead of time into render functions rather than being interpreted while the page runs. That’s where the gain comes from.
- Static nodes that never change get hoisted out of the render loop entirely
- Dynamic parts compile into small, targeted update instructions
- A virtual DOM diff compares the previous render against the next one
- Only the real DOM nodes that actually changed get patched
The compiler-informed part connects straight back to dependency tracking. Vue.js already knows which components read which reactive values, so it skips re-checking anything a given update can’t possibly touch.
Less runtime diffing than a plain virtual DOM library would have to do on its own.
Vue.js Template Syntax and Directives
Templates are plain HTML with extra attributes bolted on. Directives, all prefixed with v-.
- v-if conditionally renders an element, while v-show just toggles whether it’s visible
- v-for loops over an array or object to render a list
- v-bind binds an attribute to data and v-on listens for a DOM event, shortened in practice to a colon and an at sign
Then there’s v-model, which wraps v-bind and v-on together to give you two-way data binding on form inputs through a single attribute.
Text inside double curly braces, mustache syntax, handles simple interpolation. Write {{ message }} and the current value of message lands directly in the markup.
Expressions inside directives and mustache tags are ordinary JavaScript, so anyone with a JavaScript cheat sheet open will recognize what they’re reading.
There’s no new templating language to learn here.
What Tools Make Up the Vue.js Ecosystem
The core stays deliberately small, and official libraries pick up routing, state, builds, and full-stack rendering.
| Tool | Purpose | When to reach for it |
|---|---|---|
| Vue Router | Client-side navigation and nested routes | Any multi-page single-page application |
| Pinia | Global state management | Sharing data across unrelated components |
| Vite | Dev server and production build tool | Nearly every new Vue.js project |
| Nuxt | Server-side rendering and file-based routing | SEO-sensitive or content-heavy sites |
Pinia has taken over as the default for state management. It’s now used by over 80% of developers surveyed, against just 38.4% still on the older Vuex library (State of Vue.js Report 2025, Monterail with Evan You and the Vue Core Team).
Vite replaced Vue CLI as the default build tool for a boring practical reason. It starts a dev server almost instantly instead of bundling the whole app first.
The State of JS 2024 survey found Vite was the third most-used build tool overall, with a 56% positive-opinion rate, the highest of any build tool measured that year.
When server-side rendering is on the table, Nuxt wraps Vue.js with file-based routing and a production-ready SSR setup.
68% of Vue.js developers reported using Nuxt in the past year, and over 80% of that group said they would use it again (State of Vue.js Report 2025).
GitLab’s frontend runs on Vue.js. Its public developer guidelines list Pinia among the client-side state-management options the team is moving to as it phases out the now-deprecated Vuex.
How Vue.js Compares to React and Angular
Vue.js posted an 87% retention rate in the State of JS 2024 survey (14,015 respondents), ahead of React’s 75% and well above Angular’s 54%.
Retention means the share of developers who used a framework and said they’d choose it again. It’s a rough proxy for day-to-day satisfaction rather than popularity, and the two numbers often disagree.
| Aspect | Vue.js | React | Angular |
|---|---|---|---|
| Type | Framework | Library | Full framework |
| Templating | HTML-based templates | JSX | HTML templates with directives |
| Maintainer | Independent core team | Meta | |
| Official router and state tools | Yes, both | Neither built in | Router yes, state via services |
React ships as a rendering library, not a full framework. That’s why teams comparing Vue vs React tend to widen the question as soon as routing and state tooling enter the decision.
Angular goes the opposite direction from Vue.js, bundling dependency injection, a full CLI, and RxJS-based patterns into one opinionated package. A closer React vs Angular comparison shows how differently those two approach the same problem.
The gap between a community-led project and two corporate-backed ones shows up mostly in hiring pools and third-party plugins.
Pros, Cons, and Who Should Use Vue.js
The strongest thing going for Vue.js is how little it asks of you before you get something working.
- Gentle learning curve if you already know HTML, CSS, and JavaScript
- Official router, state management, and build tooling arrive as one coherent set
- Documentation is clear and example-heavy, maintained by the core team itself
- Works about as well bolted onto an old page as it does driving a new single-page app
The downsides are real, and worth saying out loud.
- Smaller hiring pool than React, particularly outside Europe and Asia
- Fewer enterprise-only extensions and paid support contracts on offer
- Migrating a large Vue 2 codebase to Vue 3 still trips up over a quarter of teams that attempt it (State of Vue.js Report 2025)
- Some third-party component libraries lag behind their React equivalents
Small and mid-size product teams get the most out of it. So do agencies juggling several client codebases, and anyone retrofitting reactivity onto a server-rendered site.
Large organizations already standardized on React or Angular rarely find enough upside to justify a switch. Existing components and hiring pipelines outweigh whatever the learning curve saves.
When Vue.js Does Not Apply
Vue.js is the wrong pick often enough that pretending otherwise wastes a team’s time.
- Native mobile apps, where Vue.js has no first-party equivalent to React Native for building real native experiences
- Teams locked into React or Angular, where existing components, hiring pipelines, and internal tooling rarely justify a rewrite
- Static, content-only sites, where a static site generator often outperforms a reactive framework with no real interactivity to manage
- Projects that need to staff a large team on short notice, since React’s bigger talent pool cuts the risk on tight deadlines
Meta built React Native specifically so React skills would carry over to cross-platform app development, and apps like Instagram have shipped features through it for years.
Vue.js teams chasing that same outcome usually end up comparing Flutter or React Native anyway, since neither one is a Vue.js product.
None of that makes Vue.js weaker as a framework. It just means the decision depends on what already surrounds it, not on Vue.js in isolation.
How to Install and Set Up a Vue.js Project
Real applications get a full build setup. Quick experiments can skip all of it with a plain CDN script tag.
- Install a current version of Node.js, since the official scaffolding tool depends on it
- Run npm create vue@latest in a terminal, inside the folder meant to hold the project
- Answer the setup prompts for TypeScript, Vue Router, Pinia, and testing tools as needed
- Move into the new project folder and run npm install to pull in dependencies
- Run npm run dev to start the Vite-powered local server, usually at localhost:5173
- Run npm run build when the app is ready, producing a production bundle in the dist folder
The npm create vue@latest command installs and runs create-vue, the official scaffolding tool documented directly in the vuejs/create-vue repository on GitHub.
Skipping the build step means dropping one script tag pointing at a CDN build of Vue.js straight into an HTML file. No npm install, no compiler involved.
For editing single-file components, Vue.js’s own documentation recommends VS Code with the official Vue extension.
FAQ on Vue.Js
Is Vue.js free to use, and what license does it carry?
The MIT license covers it, one of the most permissive open source terms available.
Teams can use, modify, and redistribute it inside commercial products with no royalty owed, as long as the original copyright notice stays in the source.
Is Vue.js still actively maintained?
Yes. Patch releases have kept shipping through 2026, and the vuejs/core repository has an active commit history.
Vue 3.5 still gets bug fixes and performance work. Vue 3.6, built around a new reactivity core and an experimental Vapor Mode compiler, was in release-candidate testing as of this writing.
What common mistakes do beginners make with Vue.js reactivity or API styles?
Destructuring a reactive() object breaks its reactivity, since Vue tracks the object itself and not the variables you pulled out of it.
Forgetting .value when reading a ref() outside a template is the other one everybody hits, along with mixing Options and Composition API styles in the same component.
How long does it take to learn Vue.js?
Anyone comfortable with HTML, CSS, and JavaScript can build a working component within a day, because the template syntax barely departs from plain HTML.
Real fluency, meaning the Composition API and the wider tooling around it, usually takes a few weeks of steady practice.
Can Vue.js be used with TypeScript?
Yes, and the support runs deeper than in most frameworks that added typing later. Single-file components accept lang=”ts” in the script block.
The official vue-tsc tool type-checks templates alongside logic, and the Composition API gets noticeably better type inference than the Options API.
What Should You Build First With Vue.js?
Start with one working single-file component made through the official scaffolding tool. The reactivity model and template syntax need to feel automatic before Pinia, Vue Router, or Nuxt are worth touching.
The build order that tends to hold up in practice looks like this.
- One single-file component wired to local reactive state
- Composition API logic shared through Pinia once state crosses component boundaries
- Nuxt added only when server rendering or file-based routing turns into a real requirement
That order trades early flexibility for a smaller set of decisions at once. You accept Pinia and Vue Router as defaults instead of evaluating alternatives while still learning how reactivity works.
It’s also roughly how most custom app development work with Vue.js actually unfolds. Component first, shared state second, full-stack rendering last.
- How to Use GitHub Projects to Manage Your Work - September 12, 2026
- How To Visualize and Optimize Lead Flow Using Kanban Principles - September 12, 2026
- C# cheat sheet - September 11, 2026
