Vue.js 3 (with Pinia, Vue Router & Nuxt basics)

Vue.js is a progressive JavaScript framework for building user interfaces, created by Evan You (ex-Google, worked on AngularJS) in 2014. "Progressive" means you can use it as a drop-in script to enhance a page, or as a full SPA framework with router, state management and SSR.

Key characteristics:

• Single-File Components (SFCs) — .vue files with <template>, <script> and <style> together.
• Declarative templates with directives (v-if, v-for, v-model, v-bind, v-on).
• Fine-grained reactivity — Vue tracks which components depend on which state (via JavaScript Proxies in Vue 3) and re-renders only what's needed.
• Two API styles: Options API (data, methods, computed) and Composition API (ref, reactive, computed inside <script setup>).
• Official ecosystem: Vue Router, Pinia (state), Vite (build tool, also created by Evan You), Vue DevTools, Nuxt (full-stack framework, third-party but closely aligned).

Vue sits between AngularJS-style templates and React-style components: approachable for beginners, scalable for large apps (used by Alibaba, Xiaomi, GitLab, Nintendo and many Asian companies).

Ecosystem: Vuex (official store for Vue 2) → Pinia became the official recommendation (2022). Vue CLI (webpack) → create-vue + Vite. Nuxt 3 (2022), Nuxt 4 (July 2025).

Component lifecycle (Composition API hook → Options API name):

Reactivity update cycle: state change → the reactive Proxy's set trap triggers the effects (components, computeds, watchers) that read that property → component re-render is queued and batched in the next microtask (nextTick) → virtual DOM diff (optimised by compiler hints: static hoisting, patch flags, block tree) → DOM patched → onUpdated.

App bootstrap: createApp(App) → app.use(router), app.use(createPinia()), global components/directives → app.mount("#app").