FRONT END

Home › Glossary › Front End· 444 ·

Vue.js

\\vyoo jay-ess\\n.

Filed underFront EndSoftware Engineering

In brief · quick answer

Vue.js is a progressive, incrementally adoptable JavaScript framework for building user interfaces. Created by Evan You, it features a reactive, compiler-optimized rendering system and an approachable API that scales from a library to a full-featured framework.

§ 1 Definition

Vue.js (pronounced like 'view') is an open-source JavaScript framework for building user interfaces and single-page applications. Created by Evan You in 2014, Vue positions itself as a progressive framework: you can drop it into an existing page via a script tag for simple interactivity, or use it with its companion libraries (Vue Router, Pinia, Vite) to build full-scale applications. Vue's core library focuses on the view layer, using a reactive data system that tracks dependencies and updates the DOM automatically. Vue 3 (released 2020) introduced the Composition API, a set of additive APIs that enable flexible logic composition similar to React hooks, along with improved TypeScript support and the Teleport, Suspense, and Fragments features.

§ 2 Reactive System

Vue's reactivity system uses JavaScript Proxy objects (in Vue 3) to intercept property access and mutations. When a component renders, Vue tracks every reactive property accessed during that render. When a tracked property changes, Vue knows exactly which components to re-render. This fine-grained tracking eliminates the need for virtual DOM diffing at the component level, though Vue still uses a virtual DOM for efficient DOM updates within each component.

§ 3 Single-File Components

Vue popularized single-file components (SFCs), where a `.vue` file encapsulates template, script, and style in a single file. The template uses HTML-like syntax with Vue-specific directives (`v-if`, `v-for`, `v-model`, `v-bind`). The script section uses either the Options API (data, methods, computed, watch) or the Composition API (`setup()` or `<script setup>`). Styles can be scoped using the `scoped` attribute, which applies CSS encapsulation at the component level.

§ 4 Note

Common misunderstanding: Vue is not 'React with better syntax.' Vue's reactivity model is fundamentally different (Proxy-based tracking vs. Virtual DOM diffing). Also, Vue is not only suitable for small projects. Companies like GitLab, Alibaba, and Nintendo use Vue in production. The idea that Vue lacks enterprise adoption is outdated.

§ 5 In code

```vue
<script setup>
import { ref, computed } from 'vue';

const count = ref(0);
const doubled = computed(() => count.value * 2);
</script>

<template>
  <button @click="count++">{{ count }} doubled is {{ doubled }}</button>
</template>

<style scoped>
button { color: green; }
</style>
```

§ 6 Common questions

Q. What is the difference between Vue 2 and Vue 3?: A. Vue 3 introduced the Composition API, Proxy-based reactivity (replacing Object.defineProperty), TypeScript support, Teleport, Fragments, and Suspense. Vue 2 reached End of Life in December 2023.
Q. Should I use Options API or Composition API?: A. Use Composition API for new projects. It provides better TypeScript inference, better logic reuse through composables, and scales better as components grow.

Key takeaways

Vue.js is a progressive framework that scales from a script tag include to a full-scale SPA framework.
Proxy-based reactivity provides fine-grained change detection without virtual DOM diffing overhead.
Single-file components encapsulate template, script, and styles in one file with optional scoped CSS.

How Atomic Glue helps

Atomic Glue selects the right tool for each project. While our primary stack uses React and Next.js, our team understands Vue.js deeply and can build or maintain Vue applications when the architecture calls for it. We evaluate your project requirements first and recommend the best technology, not the one we use most.

Get in touch

# Vue.js

Category: Front End (also: Software Engineering)

Author: Atomic Glue Development Team

## Definition

## Reactive System

## Single-File Components

## Note

## In code

## Common questions
Q: What is the difference between Vue 2 and Vue 3?
A: Vue 3 introduced the Composition API, Proxy-based reactivity (replacing Object.defineProperty), TypeScript support, Teleport, Fragments, and Suspense. Vue 2 reached End of Life in December 2023.
Q: Should I use Options API or Composition API?
A: Use Composition API for new projects. It provides better TypeScript inference, better logic reuse through composables, and scales better as components grow.

## Key takeaways

Vue.js is a progressive framework that scales from a script tag include to a full-scale SPA framework.
Proxy-based reactivity provides fine-grained change detection without virtual DOM diffing overhead.
Single-file components encapsulate template, script, and styles in one file with optional scoped CSS.

## Related entries

Last updated June 2026. Permalink: atomicglue.co/glossary/vue-js