TL;DR

Vue 3 is a progressive JavaScript framework that excels at being incrementally adoptable. Its Composition API (replacing the Options API) enables better TypeScript integration, logic reuse via composables, and fine-grained reactivity. Vue 3 is 41% smaller than Vue 2, supports tree-shaking, and includes powerful new features like Teleport, Suspense, and defineAsyncComponent. The script setup syntax dramatically reduces boilerplate. Pinia has replaced Vuex as the official state management solution. If you are building a new project, use Vue 3 with script setup, TypeScript, Pinia, and Vue Router 4.

Key Takeaways

• The Composition API is the recommended way to write Vue 3 components — it groups logic by feature rather than by lifecycle hook, making large components far easier to maintain and test.
• script setup is syntactic sugar over the Composition API that eliminates boilerplate: no need to return values, defineProps/defineEmits replace the options object, and TypeScript inference works automatically.
• Pinia is the official Vue state management library — it uses the Composition API, is fully TypeScript-typed, supports Vue DevTools, and is simpler than Vuex with no mutations.
• Composables (useXxx functions) are the Vue 3 pattern for reusable stateful logic — they replace mixins and provide/inject for most use cases and are fully typed with TypeScript.
• Vue 3 is 41% smaller than Vue 2 with full tree-shaking support, meaning unused features are not included in your production bundle.
• Vue Router 4 is designed for Vue 3 with first-class TypeScript support, composition API integration (useRoute, useRouter), and improved navigation guards.

// ref() for primitives
import { ref, reactive, computed, watch, watchEffect } from 'vue';

const count = ref(0);
const message = ref('Hello Vue 3');

// Access via .value in <script>
count.value++; // 1
console.log(count.value); // 1

// In template, Vue auto-unwraps: {{ count }} not {{ count.value }}

// reactive() for objects
const user = reactive({
  name: 'Alice',
  age: 30,
  address: { city: 'Paris' },
});

// Mutate directly (no .value needed)
user.name = 'Bob';
user.address.city = 'London'; // deep reactivity works

// WRONG: breaking reactivity by destructuring
// const { name } = user; // name is no longer reactive!

// CORRECT: use toRefs to maintain reactivity
import { toRefs } from 'vue';
const { name, age } = toRefs(user); // still reactive

import { ref, computed, watch, watchEffect } from 'vue';

const firstName = ref('Evan');
const lastName = ref('You');

// computed: auto-tracks dependencies, memoized
const fullName = computed(() => firstName.value + ' ' + lastName.value);
console.log(fullName.value); // "Evan You"

// Writable computed
const reversedName = computed({
  get: () => firstName.value.split('').reverse().join(''),
  set: (val: string) => { firstName.value = val.split('').reverse().join(''); },
});

// watch: explicit deps, receives old + new value
watch(firstName, (newVal, oldVal) => {
  console.log('firstName changed from ' + oldVal + ' to ' + newVal);
});

// watch multiple sources
watch([firstName, lastName], ([newFirst, newLast], [oldFirst, oldLast]) => {
  console.log('Name changed');
});

// watch with immediate: true
watch(firstName, (val) => { document.title = val; }, { immediate: true });

// watchEffect: auto-tracks, runs immediately
watchEffect(() => {
  console.log('firstName is now:', firstName.value); // runs on mount + changes
  console.log('lastName is now:', lastName.value);
});

<!-- UserCard.vue -->
<script setup lang="ts">
import { ref, computed } from 'vue';

// Props with TypeScript generics — no import needed for defineProps
const props = defineProps<{
  name: string;
  age: number;
  role?: string; // optional prop
}>();

// Default values with withDefaults
const propsWithDefaults = withDefaults(defineProps<{ role?: string }>(), {
  role: 'viewer',
});

// Emits with TypeScript
const emit = defineEmits<{
  select: [userId: number];    // named tuple syntax
  update: [name: string, age: number];
  close: [];                    // no payload
}>();

const isExpanded = ref(false);
const initials = computed(() =>
  props.name.split(' ').map(n => n[0]).join('')
);

function handleSelect() {
  emit('select', 42);
}

// defineExpose: make internal state accessible via template ref
defineExpose({ isExpanded, initials });
</script>

<template>
  <div @click="handleSelect">
    <span>{{ initials }}</span>
    <p>{{ props.name }}, {{ props.age }}</p>
  </div>
</template>

<script setup lang="ts">
import { useTemplateRef, onMounted, ref } from 'vue';

// Vue 3.5+ approach
const inputEl = useTemplateRef<HTMLInputElement>('myInput');

// Pre-3.5 approach (still works)
const legacyInputEl = ref<HTMLInputElement | null>(null);

onMounted(() => {
  // Populated after mount
  inputEl.value?.focus();
  legacyInputEl.value?.select();
});
</script>

<template>
  <!-- ref attribute matches the string in useTemplateRef() -->
  <input ref="myInput" type="text" placeholder="Auto-focused on mount" />
  <input ref="legacyInputEl" type="text" placeholder="Legacy approach" />
</template>

// src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'home',
    component: () => import('../views/HomeView.vue'), // lazy-loaded
  },
  {
    path: '/users',
    component: () => import('../views/UsersLayout.vue'),
    children: [
      { path: '', name: 'user-list', component: () => import('../views/UserList.vue') },
      { path: ':id', name: 'user-detail', component: () => import('../views/UserDetail.vue') },
    ],
  },
  {
    path: '/admin',
    component: () => import('../views/AdminView.vue'),
    meta: { requiresAuth: true, requiresAdmin: true },
  },
  { path: '/:pathMatch(.*)*', name: 'not-found', component: () => import('../views/NotFound.vue') },
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) return savedPosition;
    return { top: 0 };
  },
});

export default router;

// Global navigation guard — authentication check
router.beforeEach(async (to, from) => {
  const authStore = useAuthStore();
  if (to.meta.requiresAuth && !authStore.isLoggedIn) {
    return { name: 'login', query: { redirect: to.fullPath } };
  }
  if (to.meta.requiresAdmin && !authStore.isAdmin) {
    return { name: 'forbidden' };
  }
  // return undefined or true to proceed
});

// In-component guards (Composition API)
<script setup lang="ts">
import { onBeforeRouteLeave, onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';

const route = useRoute();   // reactive current route
const router = useRouter(); // router instance for programmatic navigation

console.log(route.params.id);  // current :id param
console.log(route.query.page); // ?page= query param
console.log(route.meta);       // typed route meta

onBeforeRouteLeave((to, from) => {
  if (hasUnsavedChanges.value) {
    return confirm('You have unsaved changes. Leave?');
  }
});

onBeforeRouteUpdate((to, from) => {
  // fires when same component used for different params
  fetchUser(to.params.id as string);
});

// Programmatic navigation
router.push({ name: 'user-detail', params: { id: 42 } });
router.replace('/dashboard');
router.go(-1); // go back
</script>

// src/stores/counter.ts — Setup Store (preferred)
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useCounterStore = defineStore('counter', () => {
  // state
  const count = ref(0);
  const history = ref<number[]>([]);

  // getters (computed)
  const doubleCount = computed(() => count.value * 2);
  const isPositive = computed(() => count.value > 0);

  // actions
  function increment() {
    history.value.push(count.value);
    count.value++;
  }

  async function fetchAndSet(id: number) {
    const data = await fetch('/api/counts/' + id).then(r => r.json());
    count.value = data.value;
  }

  function $reset() { count.value = 0; history.value = []; }

  return { count, history, doubleCount, isPositive, increment, fetchAndSet, $reset };
});

// src/stores/user.ts — Options Store style
export const useUserStore = defineStore('user', {
  state: () => ({ name: '', email: '', isLoggedIn: false }),
  getters: {
    displayName: (state) => state.name || 'Guest',
  },
  actions: {
    async login(email: string, password: string) {
      const user = await authService.login(email, password);
      this.name = user.name;
      this.email = user.email;
      this.isLoggedIn = true;
    },
    logout() {
      this.$patch({ name: '', email: '', isLoggedIn: false });
    },
  },
});

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useCounterStore } from '@/stores/counter';

const counterStore = useCounterStore();

// storeToRefs preserves reactivity for state + getters
const { count, doubleCount, isPositive } = storeToRefs(counterStore);

// Actions can be destructured directly (they are not reactive)
const { increment, fetchAndSet } = counterStore;

// Batch update with $patch
counterStore.$patch({ count: 10 });

// $patch with mutation function for complex updates
counterStore.$patch((state) => {
  state.count += 5;
  state.history.push(state.count);
});

// Subscribe to store changes
counterStore.$subscribe((mutation, state) => {
  console.log('Store mutated:', mutation.type, state.count);
  localStorage.setItem('counter', JSON.stringify(state));
});
</script>

<template>
  <p>Count: {{ count }} | Double: {{ doubleCount }}</p>
  <button @click="increment">Increment</button>
</template>

<template>
  <!-- v-if / v-else-if / v-else: element destroyed+recreated -->
  <div v-if="role === 'admin'">Admin Panel</div>
  <div v-else-if="role === 'editor'">Editor Panel</div>
  <div v-else>Viewer Panel</div>

  <!-- v-show: always rendered, toggles display:none -->
  <div v-show="isExpanded">Expandable Content</div>

  <!-- v-for with :key (use unique ID, not array index) -->
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }} — ${{ item.price }}
    </li>
  </ul>

  <!-- v-for with index -->
  <ol>
    <li v-for="(item, index) in items" :key="item.id">
      {{ index + 1 }}. {{ item.name }}
    </li>
  </ol>

  <!-- v-for on a range -->
  <span v-for="n in 5" :key="n">{{ n }} </span>

  <!-- Use <template> to group without extra DOM elements -->
  <template v-for="item in items" :key="item.id">
    <dt>{{ item.term }}</dt>
    <dd>{{ item.definition }}</dd>
  </template>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const inputValue = ref('');
const isChecked = ref(false);
const selected = ref('option1');
</script>

<template>
  <!-- Basic v-model on input -->
  <input v-model="inputValue" type="text" />

  <!-- v-model modifiers -->
  <input v-model.trim="inputValue" /> <!-- trims whitespace -->
  <input v-model.number="price" type="number" /> <!-- coerce to number -->
  <input v-model.lazy="search" /> <!-- sync on change, not input -->

  <!-- v-bind shorthand: -->
  <img :src="user.avatar" :alt="user.name" />
  <button :disabled="isLoading">{{ isLoading ? 'Loading...' : 'Submit' }}</button>

  <!-- Bind object of attributes -->
  <div v-bind="{ id: 'main', class: 'container', tabindex: 0 }">...</div>

  <!-- v-on shorthand @ -->
  <button @click="handleClick">Click</button>
  <form @submit.prevent="handleSubmit">...</form>
  <input @keyup.enter="search" @keyup.escape="clearSearch" />
  <div @click.self="onOverlayClick">...</div> <!-- only fires on exact element -->

  <!-- v-model on custom component (Vue 3) -->
  <!-- Expands to: :modelValue="title" @update:modelValue="title = $event" -->
  <MyInput v-model="title" />

  <!-- Multiple v-model bindings -->
  <UserForm v-model:name="user.name" v-model:email="user.email" />
</template>

// src/composables/useFetch.ts
import { ref, watchEffect, type Ref } from 'vue';

interface UseFetchReturn<T> {
  data: Ref<T | null>;
  error: Ref<Error | null>;
  isLoading: Ref<boolean>;
  refetch: () => void;
}

export function useFetch<T>(url: Ref<string> | string): UseFetchReturn<T> {
  const data = ref<T | null>(null);
  const error = ref<Error | null>(null);
  const isLoading = ref(false);
  let controller: AbortController;

  async function fetchData() {
    controller?.abort(); // cancel previous request
    controller = new AbortController();
    isLoading.value = true;
    error.value = null;
    try {
      const endpoint = typeof url === 'string' ? url : url.value;
      const res = await fetch(endpoint, { signal: controller.signal });
      if (!res.ok) throw new Error('HTTP ' + res.status);
      data.value = await res.json() as T;
    } catch (e) {
      if ((e as Error).name !== 'AbortError') error.value = e as Error;
    } finally {
      isLoading.value = false;
    }
  }

  watchEffect(() => { fetchData(); });

  return { data, error, isLoading, refetch: fetchData };
}

// Usage in component
<script setup lang="ts">
import { ref } from 'vue';
import { useFetch } from '@/composables/useFetch';

interface User { id: number; name: string; email: string; }

const userId = ref(1);
const url = computed(() => '/api/users/' + userId.value);
const { data: user, isLoading, error } = useFetch<User>(url);
</script>

<!-- Modal component using Teleport -->
<script setup lang="ts">
defineProps<{ isOpen: boolean; title: string }>();
defineEmits<{ close: [] }>();
</script>

<template>
  <!-- Renders at document.body, not in component tree -->
  <Teleport to="body">
    <div v-if="isOpen" class="modal-overlay" @click.self="$emit('close')">
      <div class="modal">
        <h2>{{ title }}</h2>
        <slot />
        <button @click="$emit('close')">Close</button>
      </div>
    </div>
  </Teleport>
</template>

<!-- Suspense + defineAsyncComponent -->
<script setup lang="ts">
import { defineAsyncComponent } from 'vue';

const HeavyChart = defineAsyncComponent({
  loader: () => import('./HeavyChart.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorDisplay,
  delay: 200,        // show loading after 200ms
  timeout: 10000,    // error after 10s
});
</script>

<template>
  <!-- Suspense with fallback slot -->
  <Suspense>
    <template #default>
      <HeavyChart :data="chartData" />
    </template>
    <template #fallback>
      <div>Loading chart...</div>
    </template>
  </Suspense>
</template>

Should I migrate from Vue 2 to Vue 3?

Yes — Vue 2 reached end of life on December 31, 2023, meaning no more security patches or bug fixes. Migration difficulty depends on your codebase size. Small-to-medium projects can migrate directly using the @vue/compat migration build, which enables Vue 3 with Vue 2-compatible behavior and console warnings for deprecated APIs. Large projects should plan a phased migration: first update to Vue 2.7 (which backports the Composition API), then migrate to Vue 3. The key breaking changes are: the Options API still works in Vue 3, but filters are removed, $on/$off/$once are removed, and some directives have syntax changes.

What is the difference between the Composition API and the Options API?

The Options API organizes component logic into predefined option buckets: data, methods, computed, watch, mounted, etc. This is familiar and works well for simple components but can make large components hard to follow as related logic is scattered across multiple options. The Composition API uses setup() (or script setup) as a single entry point where you organize logic by feature rather than by option type. A "user search" feature's state, computed values, and fetch logic can all live together in one place. The Composition API also enables better TypeScript inference and composables for logic reuse. Both APIs are fully supported in Vue 3 — you can even mix them in the same component.

Is Vue 3 good with TypeScript?

Vue 3 has excellent TypeScript support. The entire Vue 3 framework is written in TypeScript. The script setup syntax with defineProps<Props>() provides full generic type inference for props. The Composition API provides natural TypeScript integration — ref<string>(), computed<number>(), and typed reactive objects all work with full IDE autocompletion. Pinia is completely TypeScript-native. Volar (the official VSCode extension) provides template type-checking and autocompletion that rivals Angular's type system. For new projects, Vue 3 + TypeScript + Volar provides a first-class typed development experience.

What is Nuxt 3 and when should I use it?

Nuxt 3 is the full-stack Vue framework, analogous to Next.js for React. It is built on Vue 3, Vite, and Nitro (a universal server engine). Nuxt 3 provides server-side rendering (SSR) for improved SEO and initial load performance, static site generation (SSG), file-based routing, auto-imports for Vue, Pinia, and VueUse composables, a server API layer (similar to Next.js API routes), and isomorphic data fetching (useFetch, useAsyncData). Use Nuxt 3 when SEO matters (marketing sites, e-commerce, blogs), when you need a backend API co-located with your frontend, or when you want a batteries-included Vue 3 experience.

How does Vue 3 reactivity work under the hood?

Vue 3 reactivity is based on ES6 Proxy. When you create a reactive() object, Vue wraps it in a Proxy with get/set traps. When a computed property or watch effect accesses a reactive property (get trap), Vue tracks it as a dependency. When you update the property (set trap), Vue notifies all tracked dependents. ref() works similarly — it wraps the value in an object with a .value getter/setter. This Proxy-based approach eliminates Vue 2's limitations: deep reactivity without explicit Vue.set(), array index mutations work, and new properties added to objects are reactive. Computed values are memoized lazy: they only compute when a dependency changes AND the computed is accessed.

What replaced Vuex in Vue 3?

Pinia is the official replacement for Vuex in Vue 3, recommended by the Vue core team. It was created by Eduardo San Martin Morote (a Vue core team member) and is designed around the Vue 3 Composition API. The key differences from Vuex are: no mutations (only state, getters, and actions), full TypeScript support without complex type workarounds, no nested modules (just separate stores that can import each other), lighter API, and native Vue DevTools integration. Vuex 4 still works with Vue 3 but is in maintenance mode — all new projects should use Pinia.

Can I use Vue 3 without a build step?

Yes — Vue 3 can be used as a plain CDN script for progressive enhancement of existing HTML pages, no build tools required. The global build (vue.global.js) exposes all APIs on the Vue global. The ESM browser build (vue.esm-browser.js) can be used directly in native ES modules. For complex applications with Single File Components (.vue files), you need a build step — Vite is the recommended tool and provides near-instant development server startup, sub-second hot module replacement, and optimized production builds. Vue Playground (play.vuejs.org) lets you try Vue 3 online without any setup.

What is the difference between v-if and v-show?

v-if fully renders or destroys the element and its children when the condition changes. When false, the element does not exist in the DOM — it runs lifecycle hooks (onMounted/onUnmounted), handles child components being created/destroyed, and has higher toggle cost. v-show always renders the element but toggles CSS display:none. It has lower toggle cost but higher initial render cost (always renders). Use v-if when the condition rarely changes or when you want to lazy-render heavy components. Use v-show for frequently toggled content (tabs, accordion) where you want to avoid re-rendering cost.