Vue.js

Vue 3.5+ with script setup, Pinia and Vue Router Checked Oct 2026 109 code snippets

The model

Vue's reactivity tracks which state each component reads while it renders. When that state changes, Vue re-renders only those components, so you never touch the DOM by hand.
ref() holds any value. Script reads it through .value, and the template unwraps it. reactive() turns an object into a Proxy, and destructuring it loses reactivity.
Vue batches changes. The DOM updates on the next tick, once per component, so code that reads the new DOM waits for nextTick().
Data flows down as props and up as events. A child never changes a prop. It emits an event, and the parent changes the value.
New code uses the Composition API in <script setup>. The Options API, with data, methods and this, still works and still comes up in interviews.

A render reads state, so Vue tracks it. A write queues that render, and on the next tick Vue patches only the DOM nodes that changed.

App setup & SFCs

what Vue is, and how an app is put together

Vue next to React and Angular

Write the UIHTML templates by default, JSX optional

Update only what changedVue tracks reads. React re-runs components.

Compare what comes built inOfficial router and store, unlike React. Lighter than Angular.

Asked in interviews

AskedHow does Vue.js differ from React and Angular?

Create the app

Create the app and render itcreateApp(App).mount('#app')

Write a plugininstall(app, options)

Translate with I18nt('hello', { name })

TipVue DevTools shows the component tree, props, state and Pinia stores. Add it as a browser extension or a Vite plugin.

Asked in interviews

AskedWhat is the Vue instance and how do you create one?AskedWhat is Vue DevTools and how does it help in development?AskedHow do you implement internationalization (i18n) in Vue?

Vite and TypeScript

Start a new projectnpm create vue@latestA Vite project

Explain why Vue CLI starts slowerWebpack bundles the whole app first

Turn on TypeScriptlang="ts"

TrapVite strips TypeScript without checking it, so a type error still builds unless you run vue-tsc.

Asked in interviews

AskedWhat is Vite and how does it differ from Vue CLI?AskedHow do you configure Vue 3 with TypeScript?AskedHow do you use script setup with TypeScript in Vue 3?

Single-File Components

Write a component<script setup>

Use another componentImport it. Alias it if two names clash.

TrapA global component can't be tree-shaken, so it ships even when no page uses it.

Asked in interviews

AskedHow do you define a component in Vue?AskedWhat are Single File Components (SFCs) and their benefits?AskedHow do you handle component naming conflicts?

Options API or Composition API

Write the Options APIdata(), methods, all via this

Write the Composition APIref(), watch(), grouped by feature

Write setup() by handsetup(props, context)Returns what the template uses

TrapDestructuring props in setup() loses reactivity. Read props.user, or use toRefs(props).

Asked in interviews

AskedWhat is the Composition API and why was it introduced?AskedHow does the setup() function work?AskedWhat are the best practices for Vue.js development?

Templates & directives

bind data, branch, loop and handle input

v-if or v-show

Add or remove an elementv-if="ok"Each toggle rebuilds it

Hide it with CSSv-show="ok"Cheap toggle, no v-else

Toggle content on click@click="open = !open"

TrapIn Vue 3, v-if runs before v-for on the same element, so it can't see the loop item.

Asked in interviews

AskedExplain the difference between v-show and v-ifAskedHow do you implement a toggle functionality?AskedWhat is the difference between v-if and v-for priority?

Directives and data binding

Print a value as text{{ msg }}

Bind an attribute or an event:href="url"@click="save"

Render raw HTMLv-html="html"Only on sanitized HTML

TipUse a custom directive only for low-level DOM work on plain elements, never on components.

Asked in interviews

AskedWhat are the different types of data binding in Vue?AskedWhat are directives in Vue, and can you name the common ones?AskedHow do you create custom directives in Vue?

Lists with v-for and key

Loop over an arrayv-for="item in items"

Track items by identity:key="item.id"A new key rebuilds it

TrapAn index key follows the position, not the item. When the list changes, state sticks to the wrong row.

Asked in interviews

AskedHow does v-for work and what are its best practices?AskedWhat is the purpose of the key attribute in Vue?AskedHow do you implement a search filter?

Event modifiers and forms

Stop the default action, or bubbling@submit.prevent@click.stop

Trim, cast or sync on changev-model.trimv-model.numberv-model.lazy

Validate a field when it loses focus@blur="check('email')"Recheck all on submit

Let an element accept a drop@dragover.preventNeeded, or drops are refused

Asked in interviews

AskedWhat are modifiers in Vue directives?AskedHow do you implement form validation in Vue?AskedHow do you implement drag and drop functionality?

Classes and scoped CSS

Toggle a class:class="{ active: on }"

Keep styles inside a component<style scoped>Adds a data-v- attribute

Style inside a child:deep(.item)

TrapA parent's scoped styles reach a child's root element, but nothing inside it.

Asked in interviews

AskedHow do you implement conditional classes in Vue?AskedHow does CSS scoping work in Vue?

Reactivity & watchers

state Vue tracks, and code that reacts to it

ref, reactive and shallowRef

Hold any reactive valueconst n = ref(0)Read n.value in script

Make an object reactivereactive({ a: 1 })Objects only, no .value

Hold big data you replace wholeshallowRef(rows)Nested edits need triggerRef()

Force a re-render$forceUpdate()A sign of a reactivity bug

TrapReplacing or destructuring a reactive() object breaks reactivity. That's why Vue recommends ref() by default.

Asked in interviews

AskedExplain ref vs reactive in Vue 3 AskedExplain the concept of reactivity in Vue.js AskedWhat is the purpose of $forceUpdate()?

Computed values

Derive a cached valuecomputed(() => n.value * 2)

Run on every renderUse a method instead

TrapA computed that reads only Date.now() never updates. It re-runs only when reactive state it reads changes.

Asked in interviews

AskedExplain the concept of computed properties AskedWhat's the difference between computed properties and methods?

Watchers

Watch a refwatch(q, fn)

Watch one propertywatch(() => s.id, fn)

Track whatever the callback readswatchEffect(fn)Runs at once, no old value

Fire only one time (3.4+){ once: true }

TrapWatching a reactive() object is deep by default. A deep watcher walks every nested property on each change.

Asked in interviews

AskedHow do watchers work in Vue and when should you use them?AskedHow do you watch data in the Composition API?AskedWhat are the performance implications of deep watching?

How updates reach the DOM

Explain how Vue tracks stateReads call track(), writes trigger()

Explain Vue 2's reactivitydefineProperty, which misses new keys

Explain the virtual DOMVue diffs vnode trees and patches only changes

Read the DOM after a changeawait nextTick()this.$nextTick()

Asked in interviews

AskedWhat is the difference between nextTick and $nextTick?AskedWhat is the Virtual DOM and why does Vue use it?

Props, events & slots

pass data down, send changes up, take content in

Props

Declare propsdefineProps(['title'])defineProps<Props>()

Validate a prop{ type: Number, required: true }

Default an array propdefault: () => []

Destructure props (3.5+){ count = 0 } stays reactive

TrapProps are read-only. To change one, emit an event and let the parent update it.

Asked in interviews

AskedWhat are props and how do you validate them?AskedExplain the difference between props and data AskedWhat is defineProps and defineEmits in script setup?

Events and v-model

Declare and send an eventdefineEmits(['save'])emit('save', item)

Support v-model on a componentmodelValue in, update:modelValue out

Do that in one call (3.4+)defineModel()

Bind a prop two ways in Vue 2:title.sync="t"Now v-model:title

TrapComponent events don't bubble. Only the direct parent can listen.

Asked in interviews

AskedHow do you emit custom events from a child component?AskedWhat is v-model and how does it work internally?

Slots and scoped slots

Fill a named slot<template #header>

Pass child data to the slot<slot :item="item" />#default="{ item }"

Share logic without markupA renderless component, using scoped slots

TrapSlot content compiles in the parent's scope, so it can't read the child's data without slot props.

Asked in interviews

AskedWhat are slots and how do they work?AskedWhat are scoped slots and when would you use them?

Fallthrough attributes

Read non-prop attrs$attrsuseAttrs()

Put them on an inner elementinheritAttrs: falsev-bind="$attrs"

Forward listeners the Vue 2 wayv-on="$listeners"Gone, now in $attrs

TrapWith several root nodes, nothing falls through, and Vue warns. Bind $attrs yourself.

Asked in interviews

AskedWhat is $attrs and $listeners in Vue?AskedWhat are Vue 3 Fragments and how do they work?

Template refs

Get an element (3.5+)useTemplateRef('el')

Do it in the Options APIthis.$refs.input

Expose child methodsdefineExpose({ reset })

Reach the parentthis.$parentA last resort. It couples them.

TrapA template ref is null until mount. Read it in onMounted(), not in setup code.

Asked in interviews

AskedWhat is the purpose of the ref attribute in Vue?AskedHow do you access template refs in the Composition API?AskedHow do you access a component's parent or child components?

Lifecycle & composables

run code at set points, then reuse the logic

Lifecycle hooks

List the hooks in orderCreate, mount, update, unmount, each with a before hook

Run code before mountIn setup code, or created

Touch the DOMonMounted(fn)Browser only, not in SSR

Name Vue 2's removal hookbeforeDestroyNow beforeUnmount

TrapRegister hooks synchronously in setup. A hook inside a setTimeout has no component to attach to.

Asked in interviews

AskedExplain the Vue component lifecycle hooks AskedWhat happens in the created vs mounted lifecycle hooks?AskedWhat are lifecycle hooks in the Composition API?

Clean up on unmount

Clean up before removalonBeforeUnmount(fn)Clear timers and listeners, destroy libraries

Close a WebSocketsocket.close()Set a flag, or it reconnects

TipVue stops the watchers made in setup by itself. One made after an await needs the stop function watch() returns.

Asked in interviews

AskedWhen would you use beforeDestroy/beforeUnmount hook?AskedHow do you implement real-time features with WebSockets?

Composables and mixins

Share stateful logicA use function. Each call makes new state.

Use one in a componentconst { count } = useCounter()

Share options the Vue 2 waymixins: [myMixin]Unclear sources, name clashes

Asked in interviews

AskedHow do you create and use composables in Vue 3?AskedWhat are mixins and what are their limitations?

Fetch data and catch errors

Refetch when a prop changeswatch(() => p.id, load)With immediate: true

Abort old fetch (3.5+)onWatcherCleanup(fn)

Show a fallback during async setup<Suspense>Still experimental

Catch errors in a subtree, or app-wideonErrorCaptured(fn)app.config.errorHandler

TrapVue never sees an error in your own setTimeout or an unawaited promise. Catch those yourself.

Asked in interviews

AskedHow do you fetch data in a Vue component?AskedHow do you handle error boundaries in Vue?AskedWhat is Suspense in Vue 3 and how do you use it?

Shared state & Pinia

share data beyond one parent and child

Pass data across the tree

Share data with every descendantprovide('theme', theme)inject('theme')

Replace Vue 2's $on event busmitt()Call off() on unmount

TrapProvide a ref or a reactive object. A plain value never updates the descendants.

Asked in interviews

AskedWhat are the different ways components can communicate in Vue?AskedExplain the provide/inject pattern AskedHow do you create a global event bus in Vue 3?

Pinia stores

Use a storeuseCartStore()Made with defineStore()

Destructure a storestoreToRefs(store)

Pick a store for a new appPinia. Actions change state, with no mutations.

Asked in interviews

AskedHow do you use Pinia stores in components?AskedWhat is Pinia and how does it differ from Vuex?AskedWhat is Vuex and when should you use it?

Vuex, the older store

Name a Vuex store's partsstate, getters, mutations, actions and modules

Change state in Vuexcommit('SET_USER', u)Only by sync mutations

Run async work in Vuexdispatch('login', c)In an action, which then commits

TrapAn async mutation changes state after DevTools took its snapshot, so no tool can track that change.

Asked in interviews

AskedExplain the Vuex store structure AskedWhat are Vuex mutations and why must they be synchronous?AskedHow do Vuex actions differ from mutations?

Vue Router

map URLs to components

Set up routes and navigate

Create the router with clean URLscreateWebHistory()Needs a server fallback

Link to a page, then render it<router-link to="/"><router-view />

Navigate in coderouter.push('/home')

Redirect without a history entryrouter.replace('/')

TrapPass params with a route name. Vue Router ignores params next to a path.

Asked in interviews

AskedWhat is Vue Router and how do you set it up?AskedHow do you implement programmatic navigation?

Dynamic and nested routes

Match a URL segmentpath: '/user/:id'Read it as route.params.id

Nest child routesA children array, plus a <router-view> in the parent

Load a page on its first visit() => import('./About.vue')

TrapGoing from /user/1 to /user/2 reuses the component, so mounted won't run again. Watch route.params.

Asked in interviews

AskedHow do you handle dynamic routes in Vue Router?AskedHow do you handle nested routes in Vue Router?

Navigation guards and meta

Check auth on every navigationrouter.beforeEach(fn)Return false to cancel

Warn on unsaved editsonBeforeRouteLeave(fn)

Mark a route as privatemeta: { auth: true }Read to.meta.auth

Asked in interviews

AskedWhat are navigation guards and when would you use them?AskedWhat are route meta fields and how are they used?

Built-in components

switch, cache, move and animate components

Dynamic components, KeepAlive, Teleport

Switch components<component :is="tab">

Keep a hidden component's state<KeepAlive>onActivated() runs each time it shows

Render a modal under body<Teleport to="body">Escapes a parent's transform

TrapWithout max, KeepAlive caches every instance it sees, which can leak memory.

Asked in interviews

AskedHow do you handle dynamic components in Vue?AskedWhat is the keep-alive component and when would you use it?AskedWhat is the Teleport component and when would you use it?

Transitions

On insert, Vue adds v-enter-from and v-enter-active. A frame later it swaps v-enter-from for v-enter-to. Both go when the transition ends.

Animate an element in and out<Transition name="fade">

Animate a list<TransitionGroup>.list-move slides moved items

TrapEvery child of <TransitionGroup> needs a unique key, and it has no mode.

Asked in interviews

AskedHow do transitions and animations work in Vue?AskedWhat are transition groups in Vue?

Performance & rendering

render less, and ship less code

Speed up updates

Render oncev-once

Memoize a sub-treev-memo="[id, sel]"

Render a very long listUse virtual scrolling

TipPass each list item an :active flag, not the shared activeId. Then only the items whose flag flips update.

TrapAn incomplete v-memo list skips updates that should happen, and nothing warns you.

Asked in interviews

AskedWhat are the different ways to optimize Vue.js performance?AskedWhat is v-memo and when should you use it?AskedWhat is virtual scrolling and how would you implement it?

Lazy loading and bundle size

Load a component on demanddefineAsyncComponent(fn)

Load more on scrollIntersectionObserverWatch a sentinel after the list

Tree-shake unused codeNamed imports from ES builds, like lodash-es

TrapA bare () => import() works only for routes. Elsewhere, use defineAsyncComponent().

Asked in interviews

AskedHow do you implement lazy loading in Vue?AskedHow do you implement infinite scrolling in Vue?

Render functions

Build vnodes in codeh('div', props, kids)

Write a functional componentProps in, vnodes out. No faster in Vue 3.

TrapRender functions miss the template compiler's optimizations, so use templates by default.

Asked in interviews

AskedWhat are render functions and when would you use them?AskedWhat are functional components and their use cases?

Tests, SSR & migration

test components, render on the server, leave Vue 2

Test components

Mount in a testmount(Comp, { props })

Stub every childshallowMount(Comp)

Click, then check the DOMawait w.trigger('click')

Check an emitted eventw.emitted('save')

TrapWithout await, the next assertion still sees the old DOM, because Vue updates it later.

Asked in interviews

AskedHow do you test Vue components?AskedWhat is the difference between shallow and mount in Vue Test Utils?

Mock APIs and stores

Mock the API modulevi.mock('axios')

Await mocked requestsawait flushPromises()

Mount with a test storecreateTestingPinia()In global.plugins

Test a Vuex mutationCall it on a plain state object

TrapA module mock ties the test to the HTTP client. Switch axios to fetch and it breaks.

Asked in interviews

AskedHow do you mock API calls in Vue component tests?AskedHow do you test Vuex stores?

Server rendering and hydration

Render the app to HTMLrenderToString(app)createSSRApp() hydrates it

Keep users' state apartA new app, router and store per request

Render a browser-only partGate it on a flag set in onMounted()

Generate matching IDs (3.5+)useId()

Get SSR without the setupNuxt. File-based routes, auto-imports, SSR on by default.

TrapRandom values, time zones and a <div> inside a <p> cause hydration mismatches.

Asked in interviews

AskedHow do you implement server-side rendering (SSR) with Vue?AskedWhat causes a hydration mismatch, and how do you fix it?AskedWhat is Nuxt.js and how does it extend Vue?

Custom elements and micro-frontends

Ship a component as a custom elementdefineCustomElement(C)Then customElements.define()

Split the front end by teamModule Federation, single-spa, or custom elements

Asked in interviews

AskedWhat are Web Components and how does Vue support them?AskedHow do you implement micro-frontends with Vue?

Vue 2 to Vue 3

Create an app the Vue 2 waynew Vue({ render })Vue 3 uses createApp()

Replace a Vue 2 filterUse a method or a computed

Migrate one warning at a time@vue/compatWarns on each Vue 2 API

TipVue 2 reached end of life on December 31, 2023.

TrapThe migration build can't run libraries that rely on Vue 2 internals. Check each one has a Vue 3 version.

Asked in interviews

AskedWhat are the differences between Vue 2 and Vue 3?

Pro · $10/mo

This sheet stays free. With Pro, you can:

Every answer on this sheet. Read the full answer to all 105 questions it links, not just the 15 free ones.
My sheet. The cards you star and the ones you miss in Quiz me, from every sheet, on one page to quiz and print.
PDFs. Download this sheet and My sheet, laid out for A4, with every question a link to its answer.
The rest of Pro. Every answer in the question library, and 1,000 AI credits a month.

Get Pro or browse more free sheets

The model

App setup & SFCs

Vue next to React and Angular

Create the app

Vite and TypeScript

Single-File Components

Options API or Composition API

Templates & directives

v-if or v-show

Directives and data binding

Lists with v-for and key

Event modifiers and forms

Classes and scoped CSS

Reactivity & watchers

ref, reactive and shallowRef

Computed values

Watchers

How updates reach the DOM

Props, events & slots

Props

Events and v-model

Slots and scoped slots

Fallthrough attributes

Template refs

Lifecycle & composables

Lifecycle hooks

Clean up on unmount

Composables and mixins

Fetch data and catch errors

Shared state & Pinia

Pass data across the tree

Pinia stores

Vuex, the older store

Vue Router

Set up routes and navigate

Dynamic and nested routes

Navigation guards and meta

Built-in components

Dynamic components, KeepAlive, Teleport

Transitions

Performance & rendering

Speed up updates

Lazy loading and bundle size

Render functions

Tests, SSR & migration

Test components

Mock APIs and stores

Server rendering and hydration

Custom elements and micro-frontends

Vue 2 to Vue 3

Frontend Development

Angular

CSS3

GraphQL

HTML5

This sheet stays free. With Pro, you can: