Vue.js is a progressive JavaScript framework popular with startups and product companies. These Vue.js interview questions cover templates, directives, components and props for freshers, then the Composition API, reactivity, computed vs watch, Pinia, Vue Router, Nuxt and performance for experienced Vue developers.
30 questions · Updated
Fundamentals, definitions and simple scenarios. Good for freshers and warm-ups.
Vue.js is a progressive JavaScript framework for building user interfaces. It is easy to learn because templates look like HTML, it can be added to part of an existing page or used for a full single-page app, and it has an efficient reactivity system, single-file components and official libraries for routing (Vue Router) and state (Pinia).
v-bind (shorthand :) binds attributes and props, v-on (shorthand @) listens to events, v-model creates two-way binding on form inputs and components, v-if, v-else-if and v-else render conditionally, v-show toggles visibility with CSS, v-for renders lists and needs a unique :key, and v-html renders raw HTML, which must only be used with trusted content.
v-if adds and removes the element from the DOM, so it has a higher toggle cost but nothing is rendered when false. v-show always renders the element and toggles display: none, so it has a higher initial cost but cheap toggling. I use v-show for things toggled often and v-if for conditions that rarely change.
Call createApp with the root component, register plugins such as the router and Pinia with app.use(), and mount it on an element: createApp(App).use(router).mount("#app"). Projects are usually created with npm create vue@latest, which sets up Vite, TypeScript, the router, Pinia and testing as you choose.
A .vue file that keeps a component's template, script and styles together in <template>, <script setup> and <style> blocks.
Adding scoped to the style block limits the CSS to that component.
Build tools such as Vite compile these files.
Keeping everything for one component in one file makes it easy to understand and maintain.
With <script setup> and TypeScript, defineProps<{ title: string; count?: number }>() gives type checking.
Without TypeScript, defineProps accepts an object with type, required, default and a custom validator function for each prop.
Props should be treated as read-only; to change a value the child emits an event or copies it into local state.
In the Composition API: onBeforeMount and onMounted (the component is in the DOM, good for DOM access and starting things), onBeforeUpdate and onUpdated (after reactive changes re-render), and onBeforeUnmount and onUnmounted (clean up timers, listeners and subscriptions). onErrorCaptured catches errors from children. Setup code itself runs before mounting.
v-on, or @ for short, listens to events: @click="save" or @input="onInput". Modifiers handle common needs without extra code: .prevent calls preventDefault, .stop stops propagation, .once runs the handler once, .self ignores events from children, and key modifiers such as @keyup.enter react to specific keys.
The key gives each item a stable identity, so when the list changes Vue can reuse, move and remove the right elements instead of patching them in place.
Without unique keys, component state and input values can stay attached to the wrong item when you sort, filter or delete.
Use an id from the data, not the index.
:class accepts a string, an object such as { active: isActive, disabled: !canEdit } or an array of these, and merges with any static class. :style accepts an object of CSS properties, such as { color: textColor, width: progress + "%" }. Computed properties keep complex class logic out of the template.
Slots let a parent pass template content into a child component. The default slot receives content placed between the tags, named slots such as <template #header> fill specific areas, and scoped slots let the child pass data back to the parent's template, for example a table component giving each row to the parent to render.
Applied problems, trade-offs and questions about your own projects.
The Options API organises a component into options such as data, methods, computed and watch.
The Composition API, used with <script setup>, organises code by feature using functions such as ref, reactive, computed and watch.
It makes logic easier to reuse through composables and works better with TypeScript, so it is the recommended choice for new Vue 3 projects.
ref wraps any value, including primitives, in an object with a .value property; templates unwrap it automatically. reactive makes an object deeply reactive using a Proxy but cannot hold primitives, and loses reactivity if you destructure it or replace the whole object. Many teams use ref everywhere for consistency.
A computed property derives a value from reactive state and is cached until its dependencies change, which suits values shown in the template, such as a filtered list.
A watcher runs a side effect when a source changes, such as fetching data when a search term changes or saving to local storage.
If you are just calculating a value, use computed.
Parents pass data to children through props, and children notify parents by emitting events with defineEmits. v-model on a component combines a prop and an update event.
For deep trees, provide and inject pass data without prop drilling, and for shared application state Pinia stores are used.
Slots let parents pass template content into children.
watch explicitly lists the sources to watch, gives you the old and new values, and is lazy by default (it runs only when the source changes, unless immediate: true). watchEffect runs immediately and automatically tracks every reactive value used inside it. watch suits reacting to one specific change, such as fetching data when an id changes; watchEffect suits effects that depend on several values.
Composables are functions that use the Composition API to package reusable stateful logic, named with a use prefix, such as useMouse, useFetch or useLocalStorage.
Each component that calls one gets its own reactive state.
They replace mixins, which had unclear origins of properties and name clashes.
VueUse is a popular library of ready-made composables.
<Teleport to="body"> renders part of a component's template somewhere else in the DOM, while it stays part of the component logically, with access to its state and events. It is used for modals, notifications and tooltips that must escape parent elements with overflow: hidden or stacking contexts.
<component :is="currentTab"> switches between components dynamically. defineAsyncComponent loads a component only when it is needed, which splits code and speeds up initial load. <KeepAlive> caches inactive components instead of destroying them, so tab content keeps its state and does not reload; onActivated and onDeactivated hooks run when they are shown or hidden.
Guards control navigation. router.beforeEach runs before every route change and is used for authentication, for example redirecting to the login page when route meta says it requires auth.
Per-route beforeEnter guards and in-component guards such as onBeforeRouteLeave, which can warn about unsaved changes, handle more specific cases.
A guard returns false to cancel or a route to redirect.
Custom directives add low-level DOM behaviour to elements, defined with hooks such as mounted, updated and unmounted.
In <script setup>, any variable named vSomething becomes a directive, such as vFocus for auto-focusing an input.
Use them for direct DOM access, such as focus, click-outside detection or intersection observers; most logic belongs in components or composables.
They are compiler macros used in <script setup> without importing. defineProps declares props, defineEmits declares events the component can emit, defineExpose chooses what a parent can access through a template ref (components are closed by default), and defineModel creates a two-way binding prop that works with v-model on the component with very little code.
System design, deep internals, leadership and tough follow-ups.
Vue 3 wraps reactive objects in JavaScript Proxies.
When a component renders or a computed property runs, Vue tracks which reactive properties are read.
When one of those properties is set, Vue triggers only the effects that depend on it, and batches DOM updates to the next tick.
Combined with a compiler that marks static parts of templates, this makes updates efficient.
Pinia is the official state management library for Vue.
Stores define state, getters and actions, with no separate mutations, which makes it simpler than Vuex.
It has full TypeScript support, works with the Composition API, supports multiple modular stores, devtools and server-side rendering.
Vuex is now in maintenance mode.
Nuxt is a framework built on Vue that adds file-based routing, server-side rendering, static generation, hybrid rendering per route, auto-imports, server API routes and SEO helpers. I use it when a Vue application needs good SEO and fast first load, such as marketing sites, blogs and e-commerce, or when I want conventions for a large app.
Vue 3 added the Composition API and <script setup>, a Proxy-based reactivity system that detects added properties and array index changes, better TypeScript support, smaller and faster builds with tree-shaking, fragments (multiple root nodes), Teleport and Suspense. createApp replaced new Vue, filters were removed, and Pinia replaced Vuex. Vue 2 reached end of life at the end of 2023.
Lazy-load routes and heavy components, use v-memo and v-once for parts that rarely change, shallowRef and shallowReactive for large data that does not need deep reactivity, computed properties instead of methods in templates, virtual scrolling for long lists, and stable keys. I measure with Vue Devtools and Lighthouse, and keep bundles small by checking dependencies.
With Nuxt or Vue's own SSR APIs, the server renders components to HTML for fast first load and SEO, and the client hydrates it, attaching reactivity and event listeners.
Server and client output must match, so browser-only code goes in onMounted or <ClientOnly>.
State fetched on the server is passed to the client so data is not loaded twice.
Use Vitest with Vue Test Utils or Testing Library for Vue: mount the component, interact with it as a user would, and assert on the rendered output and emitted events.
Pinia stores can be tested directly or replaced with createTestingPinia, and API calls are mocked with MSW.
End-to-end tests with Playwright or Cypress cover full user journeys.
Use <script setup lang="ts"> and type props with defineProps<Props>(), events with defineEmits, refs with ref<User | null>(null) and template refs with useTemplateRef.
Run type checking with vue-tsc, since Vite only strips types.
Pinia stores, composables and the router are fully typed, and the Vue - Official extension gives type checking inside templates.
See all Frontend Developer interview questions, covering HTML, CSS, JavaScript, TypeScript, React and more.