Vue Interview Questions

app.directive('focus', {
  mounted(el) {
    el.focus()
  },
})
// <input v-focus />

<!-- Options API -->
<script>
export default {
  data() {
    return { count: 0 }
  },
  computed: {
    double() {
      return this.count * 2
    },
  },
  methods: {
    increment() {
      this.count++
    },
  },
}
</script>
 
<!-- Composition API -->
<script setup>
import { ref, computed } from 'vue'
const count = ref(0)
const double = computed(() => count.value * 2)
const increment = () => count.value++
</script>

<script setup>
defineProps({ title: String })
</script>
<template>
  <h2>{{ title }}</h2>
</template>
<style scoped>
h2 {
  color: #42b883;
}
</style>

<script setup>
import { ref } from 'vue'
 
const count = ref(0)
const increment = () => count.value++
</script>
 
<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

// composables/useFetch.js
import { ref, watchEffect, onScopeDispose } from 'vue'
 
export function useFetch(url) {
  const data = ref(null)
  const loading = ref(false)
  const error = ref(null)
  let controller
 
  watchEffect(async (onCleanup) => {
    controller = new AbortController()
    loading.value = true
    error.value = null
    onCleanup(() => controller.abort())
 
    try {
      const res = await fetch(url, { signal: controller.signal })
      if (!res.ok) throw new Error(res.statusText)
      data.value = await res.json()
    } catch (e) {
      if (e.name !== 'AbortError') error.value = e.message
    } finally {
      loading.value = false
    }
  })
 
  return { data, loading, error }
}

// ❌ if (loggedIn) { const { user } = useAuth(); }
// ✅ const { user } = useAuth(); then use v-if in template

<script setup>
import { ref, computed, watch, watchEffect } from 'vue'
 
const query = ref('')
const products = ref([/* ... */])
 
const filtered = computed(() => products.value.filter((p) => p.name.includes(query.value)))
 
watch(query, (newQ, oldQ) => {
  analytics.track('search', { query: newQ, prev: oldQ })
})
 
watchEffect(() => {
  document.title = query.value ? `Search: ${query.value}` : 'Shop'
})
</script>

const fullName = computed({
  get: () => `${first.value} ${last.value}`,
  set: (val) => {
    ;[first.value, last.value] = val.split(' ')
  },
})

defineExpose({ focus: () => inputRef.value?.focus() })

count.value++
await nextTick()
console.log(el.value.textContent) // updated DOM

import { ref, reactive, toRefs } from 'vue'
 
const count = ref(0)
count.value++ // ✅
 
const state = reactive({ name: 'Amit', age: 28 })
state.name = 'Rahul' // ✅ reactive
 
// ❌ Destructuring breaks reactivity
const { name } = state
 
// ✅ Fix with toRefs
const { name, age } = toRefs(state)
name.value = 'Priya'

import { ref, shallowRef, readonly, toRef, triggerRef } from 'vue'
 
const state = shallowRef({ huge: 'data' }) // only .value change triggers update
const readOnlyState = readonly(state)
const itemRef = toRef(state.value, 'key')
triggerRef(state) // force update for shallowRef

const count = ref(0)
const state = reactive({ items: [] })
count.value++
state.items.push(item)

<script setup>
// Top-level bindings auto-exposed to template
// defineProps, defineEmits, defineExpose are compiler macros
const props = defineProps({ id: String })
const emit = defineEmits(['save'])
</script>

import { ref, watch, toValue } from 'vue'
 
export function useFetch(url, options = {}) {
  const data = ref(null)
  const loading = ref(false)
  const error = ref(null)
  let controller
 
  async function execute() {
    const resolvedUrl = toValue(url)
    if (!resolvedUrl) return
 
    controller?.abort()
    controller = new AbortController()
    loading.value = true
    error.value = null
 
    try {
      const res = await fetch(resolvedUrl, {
        signal: controller.signal,
        ...options.fetchOptions,
      })
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      data.value = await res.json()
    } catch (e) {
      if (e.name !== 'AbortError') error.value = e.message
    } finally {
      loading.value = false
    }
  }
 
  watch(() => toValue(url), execute, { immediate: true })
 
  return { data, loading, error, refetch: execute }
}

<script setup>
import { useFetch } from '@/composables/useFetch'
 
const userId = ref('1')
const {
  data: user,
  loading,
  error,
  refetch,
} = useFetch(computed(() => `https://jsonplaceholder.typicode.com/users/${userId.value}`))
</script>
 
<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="error">
    Error: {{ error }}
    <button @click="refetch">Retry</button>
  </div>
  <div v-else-if="user">
    <h1>{{ user.name }}</h1>
  </div>
</template>

watch(userId, (id) => fetchUser(id))
watchEffect(() => {
  document.title = user.value?.name ?? 'App'
})

watch(source, (newVal, oldVal) => {}, { immediate: true, deep: true, flush: 'post' })
watch([a, b], ([newA, newB]) => {})

<!-- Child: UserCard.vue -->
<script setup>
const props = defineProps({
  name: { type: String, required: true },
  role: { type: String, default: 'user' },
})
const emit = defineEmits(['edit', 'delete'])
</script>
 
<template>
  <div class="card">
    <slot name="avatar" />
    <h3>{{ name }}</h3>
    <slot />
    <!-- default slot -->
    <button @click="emit('edit', name)">Edit</button>
  </div>
</template>
 
<!-- Parent -->
<UserCard name="Amit" @edit="handleEdit">
  <template #avatar><img src="/avatar.png" /></template>
  <p>Senior Developer</p>
</UserCard>

<component :is="tabs[activeIndex].component" />

const emit = defineEmits(['update:modelValue', 'save'])
emit('update:modelValue', newValue)

<li v-for="item in todos" :key="item.id">{{ item.text }}</li>

<script setup>
const props = defineProps({ label: String })
const emit = defineEmits(['submit'])
</script>
<template>
  <button @click="emit('submit')">{{ label }}</button>
</template>

defineProps({
  id: { type: String, required: true },
  status: { type: String, default: 'active', validator: (v) => ['active', 'archived'].includes(v) },
})

<!-- Child -->
<slot name="header" :title="pageTitle" />
<slot :item="row" />
 
<!-- Parent -->
<template #header="{ title }">
  <h1>{{ title }}</h1>
</template>
<template #default="{ item }">
  <span>{{ item.name }}</span>
</template>

<script setup>
const inputRef = ref(null)
onMounted(() => inputRef.value.focus())
</script>
<template><input ref="inputRef" /></template>

const props = defineProps<{ id: string; optional?: number }>()
const emit = defineEmits<{ (e: 'save', payload: FormData): void }>()

<!-- Parent -->
<CustomInput v-model="search" />
<!-- Equivalent -->
<CustomInput :modelValue="search" @update:modelValue="search = $event" />
 
<!-- Multiple v-models -->
<UserForm v-model:name="name" v-model:email="email" />

export const useAuthStore = defineStore('auth', () => {
  const user = ref(null)
  const token = ref(null)
 
  const isLoggedIn = computed(() => !!token.value)
 
  async function login(credentials) {
    const { data } = await api.post('/auth/login', credentials)
    user.value = data.user
    token.value = data.token
  }
 
  function logout() {
    user.value = null
    token.value = null
  }
 
  return { user, token, isLoggedIn, login, logout }
})

// services/api.js
export const api = axios.create({ baseURL: '/api/v1' })
 
// stores/products.js
export const useProductStore = defineStore('products', () => {
  const products = ref([])
  const loading = ref(false)
 
  async function fetchProducts() {
    loading.value = true
    try {
      products.value = (await api.get('/products')).data
    } finally {
      loading.value = false
    }
  }
 
  return { products, loading, fetchProducts }
})

async function fetchProducts() {
  this.loading = true
  try {
    this.products = await api.getProducts()
  } finally {
    this.loading = false
  }
}

export const useCartStore = defineStore('cart', () => {
  const items = ref([])
  const total = computed(() => items.value.reduce((s, i) => s + i.price, 0))
  function addItem(p) {
    items.value.push(p)
  }
  return { items, total, addItem }
})

// stores/cart.js
import { defineStore } from 'pinia'
 
export const useCartStore = defineStore('cart', {
  state: () => ({ items: [] }),
  getters: {
    total: (state) => state.items.reduce((sum, i) => sum + i.price, 0),
    itemCount: (state) => state.items.length,
  },
  actions: {
    addItem(product) {
      this.items.push(product)
    },
    async checkout() {
      await api.post('/checkout', this.items)
      this.items = []
    },
  },
})
 
// Component
const cart = useCartStore()
cart.addItem(product)
console.log(cart.total)

// Setup store syntax (Composition-style)
export const useUserStore = defineStore('user', () => {
  const user = ref(null)
  const isLoggedIn = computed(() => !!user.value)
  async function login(credentials) {
    user.value = await api.login(credentials)
  }
  return { user, isLoggedIn, login }
})

// Vuex (legacy)
mutations: { ADD_ITEM(state, item) { state.items.push(item); } },
actions: { addItem({ commit }, item) { commit("ADD_ITEM", item); } },
 
// Pinia
actions: { addItem(item) { this.items.push(item); } },

User action → store.action() → state update → reactive subscribers re-render

const cart = useCartStore()
cart.addItem(product) // action mutates state (Immer in Pinia)
// Components using storeToRefs(cart) re-render

const user = useUserStore()
const cart = useCartStore()
const checkout = computed(() => ({ user: user.profile, items: cart.items }))

{ path: "/admin", component: () => import("./pages/Admin.vue") }

router.beforeEach(async (to) => {
  if (to.meta.auth && !isLoggedIn()) return '/login'
})

{ path: "/products/:id", name: "product", component: Product, props: true }

const route = useRoute()
const router = useRouter()
router.push({ name: 'product', params: { id: '123' } })

import { createRouter, createWebHistory } from 'vue-router'
 
const routes = [
  { path: '/', component: () => import('./pages/Home.vue') },
  {
    path: '/products/:id',
    component: () => import('./pages/Product.vue'),
    props: true,
  },
  {
    path: '/dashboard',
    component: () => import('./layouts/Dashboard.vue'),
    meta: { requiresAuth: true },
    children: [{ path: '', component: () => import('./pages/DashboardHome.vue') }],
  },
]
 
const router = createRouter({
  history: createWebHistory(),
  routes,
})
 
router.beforeEach((to, from, next) => {
  const auth = useAuthStore()
  if (to.meta.requiresAuth && !auth.isLoggedIn) next('/login')
  else next()
})

const routes = [{ path: '/user/:id', component: UserPage }]
const router = createRouter({ history: createWebHistory(), routes })

const { data, isLoading } = useQuery({
  queryKey: ['products', filters],
  queryFn: () => api.getProducts(filters),
})

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useProductStore } from '@/stores/products'
 
const store = useProductStore()
const filter = ref('')
 
const filtered = computed(() => store.products.filter((p) => p.name.includes(filter.value)))
 
onMounted(() => store.fetchProducts())
</script>

// Preflight for PUT with JSON
fetch('https://api.example.com/orders', {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  credentials: 'include',
})

const { data, pending } = await useFetch('/api/products')

import { useQuery, useMutation, useQueryClient } from '@tanstack/vue-query'
 
const { data, isLoading, error } = useQuery({
  queryKey: ['products', category],
  queryFn: () => api.getProducts(category.value),
})
 
const queryClient = useQueryClient()
const { mutate: addToCart } = useMutation({
  mutationFn: (item) => api.addToCart(item),
  onSuccess: () => queryClient.invalidateQueries({ queryKey: ['cart'] }),
})

// composables/useWebSocket.js
export function useWebSocket(url) {
  const data = ref(null)
  const status = ref('connecting')
  let ws
 
  onMounted(() => {
    ws = new WebSocket(url)
    ws.onopen = () => (status.value = 'open')
    ws.onmessage = (e) => (data.value = JSON.parse(e.data))
    ws.onclose = () => (status.value = 'closed')
  })
 
  onUnmounted(() => ws?.close())
  return { data, status }
}

const HeavyChart = defineAsyncComponent({
  loader: () => import('./HeavyChart.vue'),
  loadingComponent: Spinner,
  delay: 200,
})

<keep-alive include="Dashboard,Settings">
  <component :is="view" />
</keep-alive>

<div v-memo="[item.id, item.selected]">
  <ExpensiveRow :item="item" />
</div>

<Suspense>
  <AsyncDashboard />
  <template #fallback><Spinner /></template>
</Suspense>

<Teleport to="body">
  <div class="modal">...</div>
</Teleport>

// server/api/products.get.ts — Nuxt server route
export default defineEventHandler(async () => {
  return await db.products.findMany()
})
 
// pages/products.vue
const { data: products } = await useFetch('/api/products')

src/features/cart/{components,composables,stores,types}
src/shared/{components,composables}

app.use(router).use(pinia).use(i18n)

src/features/{auth,catalog,cart}/
  components/, composables/, stores/, api/
src/shared/
src/app/ — router, plugins, App.vue

async function loadDashboard() {
  const [user, orders] = await Promise.all([api.get('/user'), api.get('/orders')])
  return { user: user.data, orders: orders.data }
}

function createStore(initial) {
  let state = initial
  return {
    get: () => state,
    set: (v) => {
      state = v
    },
  }
}

import { ref, watch } from 'vue'
 
export function useDebounce(value, delay = 300) {
  const debounced = ref(value.value)
  let timer
  watch(value, (v) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      debounced.value = v
    }, delay)
  })
  return debounced
}

<script setup>
const query = ref('')
const debouncedQuery = useDebounce(query, 400)
const { data } = useFetch(computed(() => (debouncedQuery.value ? `/api/search?q=${debouncedQuery.value}` : null)))
</script>

// Vue composable
export function useDebounce(value, delay = 300) {
  const debounced = ref(value.value)
  watch(value, (v) => {
    const t = setTimeout(() => (debounced.value = v), delay)
    onScopeDispose(() => clearTimeout(t))
  })
  return debounced
}

console.log('1')
setTimeout(() => console.log('2'), 0)
Promise.resolve().then(() => console.log('3'))
console.log('4')
// 1 → 4 → 3 → 2

<script setup lang="ts">
interface Product {
  id: string
  name: string
  price: number
}
 
const props = withDefaults(
  defineProps<{
    product: Product
    editable?: boolean
  }>(),
  { editable: false },
)
 
const emit = defineEmits<{
  save: [product: Product]
  cancel: []
}>()
</script>

// Typed store
export const useUserStore = defineStore('user', () => {
  const user = ref<User | null>(null)
  const isAdmin = computed(() => user.value?.role === 'admin')
  return { user, isAdmin }
})

<script setup lang="ts">
interface Props {
  title: string
  count?: number
}
const props = withDefaults(defineProps<Props>(), { count: 0 })
const emit = defineEmits<{ submit: [id: string] }>()
</script>

<nav aria-label="Main">
  <button type="button" aria-pressed="true">Active</button>
</nav>

import { mount } from '@vue/test-utils'
const wrapper = mount(Counter)
await wrapper.find('button').trigger('click')
expect(wrapper.text()).toContain('1')

router.beforeEach(async (to) => {
  const auth = useAuthStore()
  if (to.meta.auth && !auth.token) return '/login'
})

count.value++
flag.value = true
// One re-render
await nextTick()
// DOM updated

const firstName = ref('Amit')
const lastName = ref('Shah')
const fullName = computed(() => `${firstName.value} ${lastName.value}`)

<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="error">{{ error }}</div>
  <ProductList v-else :items="products" />
</template>

<script setup>
import { ref } from 'vue'
 
const count = ref(0)
const increment = () => count.value++
const decrement = () => count.value--
</script>
 
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="decrement">−</button>
    <button @click="increment">+</button>
  </div>
</template>

// composables/useCounter.js
export function useCounter(initial = 0, { min = -Infinity, max = Infinity, step = 1 } = {}) {
  const count = ref(initial)
  const increment = () => {
    count.value = Math.min(count.value + step, max)
  }
  const decrement = () => {
    count.value = Math.max(count.value - step, min)
  }
  const reset = () => {
    count.value = initial
  }
  return { count, increment, decrement, reset }
}

<script setup>
import { useCounter } from '@/composables/useCounter'
const { count, increment, decrement, reset } = useCounter(0, { min: 0, max: 10 })
</script>
 
<template>
  <output aria-live="polite">{{ count }}</output>
  <button :disabled="count <= 0" @click="decrement">−</button>
  <button :disabled="count >= 10" @click="increment">+</button>
  <button @click="reset">Reset</button>
</template>

const deep = structuredClone(original)
const shallow = { ...original }

<form @submit.prevent="handleSubmit">
  <input @keyup.enter="search" />
  <a @click.stop.prevent="navigate">Link</a>
</form>

function flatten(arr) {
  const result = []
  for (const item of arr) {
    if (Array.isArray(item)) result.push(...flatten(item))
    else result.push(item)
  }
  return result
}

<!-- GridToggle.vue -->
<script setup>
import { ref, computed } from 'vue'
 
const props = defineProps({
  rows: { type: Number, default: 3 },
  cols: { type: Number, default: 3 },
})
 
function createGrid(r, c) {
  return Array.from({ length: r }, () => Array(c).fill(false))
}
 
const grid = ref(createGrid(props.rows, props.cols))
 
function toggleCell(row, col) {
  grid.value = grid.value.map((r, ri) => (ri === row ? r.map((cell, ci) => (ci === col ? !cell : cell)) : r))
}
 
function reset() {
  grid.value = createGrid(props.rows, props.cols)
}
 
const activeCount = computed(() => grid.value.flat().filter(Boolean).length)
</script>
 
<template>
  <div class="grid-toggle">
    <header>
      <span>{{ activeCount }} / {{ rows * cols }} active</span>
      <button type="button" @click="reset">Reset</button>
    </header>
 
    <div role="grid" :aria-rowcount="rows" :aria-colcount="cols">
      <div v-for="(row, rowIndex) in grid" :key="rowIndex" role="row" class="grid-row">
        <button
          v-for="(isActive, colIndex) in row"
          :key="colIndex"
          type="button"
          role="gridcell"
          :aria-pressed="isActive"
          :aria-label="`Row ${rowIndex + 1}, Col ${colIndex + 1}, ${isActive ? 'on' : 'off'}`"
          :class="['cell', { 'cell--active': isActive }]"
          @click="toggleCell(rowIndex, colIndex)" />
      </div>
    </div>
  </div>
</template>
 
<style scoped>
.grid-row {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}
.cell {
  cursor: pointer;
  border: 2px solid #374151;
  border-radius: 6px;
  background: #f9fafb;
  width: 48px;
  height: 48px;
}
.cell--active {
  border-color: #16a34a;
  background: #22c55e;
}
</style>

// composables/useGridToggle.js
export function useGridToggle(rows, cols) {
  const grid = ref(createGrid(rows, cols))
 
  const toggleCell = (row, col) => {
    grid.value = grid.value.map((r, ri) => (ri === row ? r.map((c, ci) => (ci === col ? !c : c)) : r))
  }
 
  const activeCount = computed(() => grid.value.flat().filter(Boolean).length)
 
  return { grid, toggleCell, activeCount }
}

// ❌ Mutates — Vue may not detect if same reference
grid.value[row][col] = !grid.value[row][col]
 
// ✅ New references — always triggers update
grid.value = grid.value.map(/* ... */)

console.log(1)
setTimeout(() => console.log(2), 0)
Promise.resolve().then(() => console.log(3))
console.log(4) // 1,4,3,2

<template>
  <Spinner v-if="loading" />
  <ErrorBanner v-else-if="error" @retry="refetch" />
  <EmptyState v-else-if="!items.length" />
  <ItemList v-else :items="items" />
</template>

// Shallow merge — later wins
function mergeObjects(list) {
  return list.reduce((acc, obj) => ({ ...acc, ...obj }), {})
}
 
// Deep merge
function deepMerge(target, source) {
  const result = { ...target }
  for (const key of Object.keys(source)) {
    if (isPlainObject(target[key]) && isPlainObject(source[key])) {
      result[key] = deepMerge(target[key], source[key])
    } else {
      result[key] = source[key]
    }
  }
  return result
}
 
function isPlainObject(v) {
  return v !== null && typeof v === 'object' && !Array.isArray(v)
}
 
function mergeObjectList(list) {
  return list.reduce((acc, obj) => deepMerge(acc, obj), {})
}

<script setup>
import { computed } from 'vue'
 
const configSources = ref([
  { theme: 'dark', api: '/v1' },
  { api: '/v2', timeout: 5000 },
])
 
const mergedConfig = computed(() => configSources.value.reduce((acc, c) => ({ ...acc, ...c }), {}))
</script>

function findMissing(arr) {
  const set = new Set(arr)
  const missing = []
  for (let i = Math.min(...arr); i <= Math.max(...arr); i++) {
    if (!set.has(i)) missing.push(i)
  }
  return missing
}
findMissing([1, 2, 3, 5, 7]) // [4, 6]

// provider.ts
import { provide, inject, readonly, ref } from 'vue'
 
const ThemeKey = Symbol('theme')
 
export function provideTheme() {
  const theme = ref('light')
  const toggle = () => (theme.value = theme.value === 'light' ? 'dark' : 'light')
  provide(ThemeKey, { theme: readonly(theme), toggle })
}
 
export function useTheme() {
  const ctx = inject(ThemeKey)
  if (!ctx) throw new Error('useTheme requires provider')
  return ctx
}

const { data: orderStatus } = useWebSocket(`wss://api.example.com/orders/${id}`)

<script setup>
const props = defineProps({ max: { type: Number, default: 10 }, modelValue: Number })
const emit = defineEmits(['update:modelValue'])
const hover = ref(0)
const display = computed(() => hover.value || props.modelValue || 0)
</script>
 
<template>
  <div role="radiogroup" :aria-label="`Rating out of ${max}`">
    <button
      v-for="n in max"
      :key="n"
      type="button"
      role="radio"
      :aria-checked="modelValue === n"
      :aria-label="`${n} out of ${max}`"
      @click="emit('update:modelValue', n)"
      @mouseenter="hover = n"
      @mouseleave="hover = 0"
      :style="{ color: n <= display ? '#f59e0b' : '#d1d5db' }">
      ★
    </button>
  </div>
</template>

// Options store
export const useCartStore = defineStore('cart', {
  state: () => ({ items: [] }),
  getters: { total: (s) => s.items.reduce((a, i) => a + i.price, 0) },
  actions: {
    addItem(p) {
      this.items.push(p)
    },
  },
})
 
// Setup store (Composition — like script setup)
export const useCartStore = defineStore('cart', () => {
  const items = ref([])
  const total = computed(() => items.value.reduce((a, i) => a + i.price, 0))
  function addItem(p) {
    items.value.push(p)
  }
  return { items, total, addItem }
})

<script setup>
const props = defineProps<{ count: number }>();
// Vue 3.5: count stays reactive when destructured
const { count } = props;
</script>