Presentation

Vue.js is an open-source JavaScript framework for building Web interfaces.

Created by Evan You, it stands out for its progressive approach: Vue can be used to enhance an existing page with a few components or serve as the foundation of a complete single-page application.

The framework is built around a component system, declarative templates and a reactivity layer that automatically updates the interface when the data it uses changes.

Vue provides two main API styles: Options API and Composition API. Composition API combined with the <script setup> syntax is now the common approach for new projects and notably makes it easier to organize complex components and use TypeScript.

The official ecosystem remains deliberately modular. Vue Router handles navigation, Pinia manages state and Vite is the recommended tool for creating and building new projects.

As of October 3, 2026, Vue 3.5.43 is the latest stable version. Vue 3.6 is still in the release candidate stage.

Features

Components and templates

A Vue application is built from reusable components.

Each component can receive data, manage its own state, emit events and include other components.

Templates use a syntax close to HTML enriched with JavaScript expressions and directives.

Directives such as v-if, v-for, v-bind and v-on can respectively control display, iterate over collections, bind attributes or react to events.

This declarative approach avoids direct DOM manipulation for most common interactions.

Reactivity

Vue includes a built-in reactivity system.

ref() creates a reactive value, while reactive() turns an object into reactive state.

Computed values can be declared with computed(), and watch() can trigger logic when specific data changes.

When a value used by a component changes, Vue identifies the affected parts of the interface and updates their rendering.

This system can also be used independently of components for certain application logic.

Composition API

The Composition API organizes component logic around functions and features rather than categories of options.

It notably uses ref, reactive, computed, watch and lifecycle hooks.

Reusable logic can be extracted into functions called composables, which can then be shared between several components.

This approach is particularly suitable for complex components and generally improves type inference with TypeScript.

Options API

Vue also continues to provide the Options API.

It organizes a component into sections such as data, methods, computed, watch and lifecycle hooks.

This syntax remains fully supported and may be more accessible for certain projects or beginner developers.

Options API and Composition API rely on the same underlying system and can coexist within the same ecosystem.

Single-File Components

Single-File Components — SFCs usually group a component's template, JavaScript or TypeScript logic and styles inside a .vue file.

A component can therefore contain clearly separated <template>, <script> and <style> blocks.

The <script setup> syntax simplifies Composition API by making variables, functions and imports declared in the script directly available to the template.

SFCs require a compilation step and are particularly well suited to projects using Vite.

Props, events and v-model

Props allow a parent component to pass data to a child component.

Events allow a child component to communicate an action or change back to its parent.

Vue also supports v-model for two-way bindings suited notably to form fields and custom components.

This explicit data flow helps structure relationships between components.

TypeScript

Vue provides extensive support for TypeScript.

Props, events, refs, composables and other elements can benefit from static typing and type inference.

The official Vue editor extension also provides analysis for .vue files, including expressions used inside templates.

vue-tsc can perform these type checks from the command line.

TypeScript remains optional, however: Vue can be used with standard JavaScript.

Vue Router

Vue Router is Vue's official router.

It maps different URLs to application components and manages parameters, nested routes, redirects and programmatic navigation.

It supports both Composition API and Options API.

For a full-sized SPA, Vue generally recommends Vue Router rather than implementing navigation manually.

Pinia

Pinia is the recommended state-management solution for Vue applications.

A store can group state, derived values and actions accessible from several components.

Pinia also provides integration with Vue DevTools, TypeScript, Hot Module Replacement and server-side rendering.

Vuex, the former official state manager in the Vue ecosystem, remains usable but is now in maintenance mode; Pinia is recommended for new projects.

Vite and create-vue

New Vue projects are generally created with create-vue, the official scaffolding tool.

It generates a project based on Vite and lets users enable TypeScript, Vue Router, Pinia, tests and other features as needed.

Vite provides a fast development server, Hot Module Replacement and production builds.

The older webpack-based Vue CLI remains available for existing projects but is in maintenance mode. Vue recommends Vite for new projects.

Server-side rendering and hydration

Vue supports Server-Side Rendering — SSR.

A server can generate the initial HTML from Vue components, then the browser hydrates that page to make it interactive.

This approach can improve time to content and suit public pages requiring strong indexing.

Vue can also be used for Static Site Generation — SSG, when pages can be generated ahead of time.

For significant SSR projects, the documentation generally recommends using a Vue framework with this infrastructure already built in, notably Nuxt.

Deferred hydration

Vue 3.5 introduced lazy hydration strategies for asynchronous components used with SSR.

A component can therefore wait before being hydrated in the browser according to different criteria, such as becoming visible or the browser being idle.

This approach can reduce the amount of JavaScript executed immediately when a page loads.

It is mainly aimed at architectures using server-side rendering or hybrid generation.

Transition, Teleport and Suspense

Vue provides several built-in components for common interface requirements.

Transition and TransitionGroup simplify animations when elements appear, disappear or move.

Teleport allows part of a component to be rendered elsewhere in the DOM, which is particularly useful for modals and overlays.

Suspense can coordinate certain asynchronous components and display temporary content while they load.

These features avoid immediately adding an external library for several common needs.

Progressive project model

Vue can be used without a build system by loading the framework directly from a CDN.

This possibility is suitable for progressively adding interactive components to an existing application.

For larger applications, using SFCs, Vite and build tools is generally preferable.

This ability to move from lightweight integration to a complete application explains Vue's description as a progressive framework.

Testing and DevTools

The Vue ecosystem provides several development and testing tools.

The documentation recommends Vitest for unit testing in Vite-based projects.

Cypress can be used for end-to-end and component testing.

Vue DevTools makes it possible to inspect the component tree, state, Pinia and various performance information directly from developer tools.

Use cases

Build a SPA

Vue Router, Pinia and Vue components can be used to build a complete single-page application.

The interface can evolve according to navigation and state without fully reloading each page.

Add interactivity to an existing site

Vue can be introduced progressively into a page already produced by a traditional backend.

A form, configurator or interactive table can therefore use Vue without immediately rewriting the entire website.

Develop an application with TypeScript

SFCs and Composition API work closely with TypeScript.

This combination suits applications where components and business logic require stronger type control.

Build a site with SSR

Vue can generate the initial HTML on the server and then hydrate the interface in the browser.

For larger projects, Nuxt can manage routing, data fetching, SSR and different rendering strategies around Vue.

Create a component library

Single-File Components can be used to build a design system composed of buttons, fields, cards, modals and other reusable elements.

The same components can then be integrated into several Vue applications.

Conclusion

Vue.js combines ease of adoption with an architecture capable of growing progressively in complexity.

Its component and reactivity system makes it possible to build interfaces with relatively little code, while Composition API and <script setup> provide an organization suited to larger projects.

Vue Router, Pinia and Vite complement the framework with coherent official tools without imposing an overly heavy architecture from the start.

Vue can both enhance an existing page and serve as the foundation of a SPA or a server-rendered application using a framework such as Nuxt.

This flexibility nevertheless means that several architectural choices need to be made as the project grows, whereas a more integrated framework such as Angular provides more decisions by default.

For building modern Web interfaces with accessible syntax, built-in reactivity and a modular ecosystem, Vue.js is a particularly balanced solution.

Points to consider

  • Vue 3.5.43 is the current stable version as of October 3, 2026, released on September 17, 2026.

  • Vue 3.6 is still a preview release. The branch has reached the release candidate stage but should not yet be considered the stable production reference.

  • Vue.js is free and open source under the MIT license, including for commercial use.

  • Vue 3 is the modern reference branch. Vue 2 reached its official end of life on December 31, 2023.

  • Composition API has not replaced Options API. Both styles remain officially supported, even though Composition API with <script setup> is very common in new projects.

  • Vue does not directly provide every feature needed by a complete application. Vue Router, Pinia or a framework such as Nuxt generally complement the core framework.

  • Vue Router is recommended for SPAs with real navigation requirements. A manual implementation is suitable only for very simple cases.

  • Pinia is recommended for new projects requiring global state management. Vuex is now in maintenance mode.

  • Vue CLI is in maintenance mode. New projects should generally use create-vue and Vite.

  • SSR adds architectural complexity. Browser-specific code, shared state between requests and third-party dependencies need to be handled carefully.

  • HTML content supplied by users should not be injected without sanitization. Unsafe use of untrusted HTML or templates can introduce XSS vulnerabilities.

  • Third-party libraries have their own licenses and maintenance cycles. Their compatibility with recent Vue versions should be checked during upgrades.