Frontend

Vue

A progressive UI framework with templates and reactivity and a low barrier to entry.

Official siteRepository

What it is

Evan You, a former Google developer, created Vue, with a first release in 2014. It is an independent open source project maintained by the author, a team and sponsors.

Components are written as single-file components (.vue): template, logic and styles in one file. The Composition API (ref, computed, watch) provides reactive state, and <script setup> trims the code.

The framework is progressive: you can add it with one script on a page, or build an SPA with Vue Router and Pinia. Nuxt covers SSR, and builds usually run through Vite (also created by Evan You).

Use it when

  • You want to start fast: templates are close to HTML, and the docs are very clear.
  • You add interactivity to an existing site step by step.
  • Medium and large apps with Pinia, Vue Router and Nuxt.

Avoid it when

  • You want the biggest job market and the most third-party libraries: React is ahead.
  • The team wants one shared approach for web and mobile via React Native.

Key concepts

Single-file component
A .vue file with <template>, <script> and <style> blocks.
ref and reactive
Reactive values: a change automatically updates the template.
computed and watch
computed caches a derived value, watch runs a side effect on change.
Directives
v-if, v-for, v-model and v-bind add logic to templates.
Pinia
The official state store, simpler than Vuex.

Example

A counter component in Composition API style.

Cheat sheet

Vue cheat sheet
Command or codeWhat it does
npm create vue@latestNew Vue project
const n = ref(0)Reactive value, use n.value in script
const dbl = computed(() => n.value * 2)Derived value
watch(n, (v) => { ... })Reacts to a change
<script setup lang="ts">Composition API component style
<li v-for="i in items" :key="i.id">List rendering
<input v-model="text">Two way binding
defineProps<{ title: string }>()Typed props declaration
defineEmits<{ (e: 'save'): void }>()Component events declaration
onMounted(() => { ... })Hook that runs after mounting

How to learn it

  1. Refresh JavaScript: modules, arrays, async.
  2. Take the Vue course on ShortLesson and build your first component.
  3. Learn templates, the v-if, v-for, v-model directives and events.
  4. Study the Composition API: ref, reactive, computed, watch.
  5. Learn to extract logic into composables.
  6. Add Vue Router and Pinia for app state.
  7. Build a small project with Vite and TypeScript.
  8. Move to Nuxt when you need SSR and file based routing.

Interview questions

  1. 1. How does reactivity work in Vue 3?

    Vue wraps data in a Proxy and tracks which reactive values an effect or template reads. When a value changes, only the dependent parts re-render.

  2. 2. How does computed differ from a method?

    computed is cached and recalculated only when dependencies change, while a method runs every time. Use computed for derived data.

  3. 3. Options API or Composition API?

    The Options API groups code by type (data, methods). The Composition API groups by logic and reuses better through composables. New projects usually pick the Composition API.

  4. 4. Why is key needed in v-for?

    It helps Vue identify list items on update so it can reorder them correctly and preserve component state.

Comparisons with this technology

Related technologies

Logos belong to their owners and are used for identification only. Icons: Simple Icons (CC0), Devicon (MIT).

Explore the platform