DLDevLadder📒 My Notebook
Roadmap › 4. Frontend › Step 51
Vue

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

Vue instance and SFCs, template syntax and directives, reactivity (ref, reactive, computed, watch), Options vs Composition API, components, props, emits, slots, provide/inject, lifecycle hooks, composables, Vue Router, Pinia, forms, performance, testing and Nuxt.
Quick revision for interview day. Print it or save it as a PDF.

Template

{{ }} · :prop · @event.prevent · v-model.trim/.number/.lazy · v-if/v-else-if/v-else · v-show · v-for="(x, i) in xs" :key="x.id" · #slot · <component :is>.

Reactivity

ref (.value) · reactive · computed · watch (lazy, specific) · watchEffect (immediate, auto-track) · toRefs / storeToRefs · shallowRef · readonly · nextTick.

script setup macros

defineProps · defineEmits · defineModel (3.4) · defineExpose · defineOptions · defineSlots · withDefaults.

Lifecycle (Composition)

setup → onBeforeMount → onMounted → onBeforeUpdate → onUpdated → onBeforeUnmount → onUnmounted (+ onErrorCaptured, onActivated/onDeactivated).

Communication

props ↓ · emits ↑ · v-model ↕ · provide/inject (deep) · Pinia (global) · template ref + defineExpose.

Built-ins

<Transition> · <TransitionGroup> · <KeepAlive> · <Teleport> · <Suspense> · defineAsyncComponent.

Ecosystem

Vite · Vue Router 4 (guards: beforeEach, beforeEnter, onBeforeRouteLeave) · Pinia · VueUse · Vitest + Vue Test Utils · Nuxt 4.

Versions

2.0 (2016) · 2.7 (2022) · Vue 2 EOL 31 Dec 2023 · 3.0 (2020) · 3.2 script setup · 3.4 defineModel · 3.5 props destructure, useTemplateRef · 3.6 Vapor Mode (in development).