What is Vue.js?

What is Vue.js?

Vue.js is an open-source JavaScript framework for building user interfaces. It builds on standard HTML, CSS and JavaScript and gives you a declarative, component-based model: you describe what the page should look like for a given state, and Vue updates the DOM when that state changes. Vue 3 is the current major version.

How Vue works

Vue extends HTML with a template syntax and tracks the reactive state your template reads. When a value changes, Vue re-renders only what depends on it. Components are usually written as single-file components (.vue files) that keep logic, template and styles together. With a build step, this is the recommended way to author components in the Vue docs. A Vue 3 component in the Composition API style looks like this:

<script setup> import { ref } from 'vue'; const count = ref(0) </script> <template><button @click="count++">Count is {{ count }}</button></template>

Options API vs Composition API

Vue offers two authoring styles on the same underlying system. The Options API is implemented on top of the Composition API.

• Options API: logic is grouped into options such as data, methods and mounted. It is the more beginner-friendly style.
• Composition API: reactive state and functions are declared directly, typically with <script setup>. It is more free-form and suits full applications and reusable logic.

The Vue docs suggest the Options API for low-complexity, progressive-enhancement use and the Composition API with single-file components for full applications.

Where Vue is used

Vue calls itself a progressive framework: you can adopt it step by step. The docs list these ways to use it:

• Enhancing static HTML without a build step.
• Embedding it as web components on any page.
• A client-side single-page application (SPA) built with Vite.
• Fullstack server-side rendering (SSR), where the browser then hydrates the HTML. Nuxt is the usual meta-framework for this.
• Static site generation (Jamstack).

Vue 2 is end of life

Vue 2 reached end of life on December 31, 2023, according to vuejs.org. Version 2.7 was its last minor release. If you still run Vue 2, plan a migration to Vue 3: the Vue site lists Extended LTS from a third party as a stopgap.

Common mistakes

• Mutating a prop inside a child component instead of emitting an event to the parent.
• Forgetting .value on a ref inside <script setup>, while templates unwrap it automatically.
• Shipping a client-only SPA and ignoring the first load: a large JavaScript bundle delays what users see.
• Rendering very long lists without limiting what is in the DOM.
• Mixing Vue 2 tutorials with Vue 3 code and ending up with APIs that no longer exist.

Vue and performance testing

A load test sends traffic to your servers and APIs. It does not run your Vue code, so it cannot show slow rendering or a heavy bundle. Measure that in a real browser: the free Core Web Vitals checker reports field data for a URL, and page speed monitoring runs scheduled Lighthouse audits and alerts you on regressions. For deeper reading, see our guides on JavaScript performance and frontend performance testing.

FAQ

Is Vue.js a framework or a library?

The Vue docs call it a framework. Its core focuses on the view layer, and routing and state management come from companion libraries that you add when you need them.

Is Vue 2 still supported?

No. Vue 2 reached end of life on December 31, 2023. New projects should use Vue 3.

Should I use the Options API or the Composition API?

Either works, because both run on the same system. The Vue docs recommend the Composition API with single-file components for full applications and the Options API for simpler, build-free use.

Can Vue render on the server?

Yes. Vue supports server-side rendering and static site generation, and Nuxt builds a full application framework on top of it.