Vue interview questions and answers

import { onMounted, ref } from 'vue'

const el = ref(null)

onMounted(() => {
  console.log('Component is mounted!')
  console.log(el.value) // DOM element is accessible here
})

<!-- layouts/default.vue — applied to all pages by default -->
<template>
  <div>
    <AppHeader />
    <main>
      <slot /> <!-- Page content renders here -->
    </main>
    <AppFooter />
  </div>
</template>

<!-- layouts/admin.vue — custom layout for admin pages -->
<template>
  <div class="admin-shell">
    <AdminSidebar />
    <main>
      <slot />
    </main>
  </div>
</template>

<!-- pages/dashboard.vue — uses the admin layout -->
<script setup>
definePageMeta({
  layout: 'admin'
})
</script>

<template>
  <div>
    <h1>Dashboard</h1>
  </div>
</template>

<!-- pages/login.vue — no layout -->
<script setup>
definePageMeta({
  layout: false // Disable layout entirely
})
</script>

<template>
  <!-- Static content that never changes after initial render -->
  <h1 v-once>Welcome to {{ appName }}</h1>
  <!-- appName won't update even if the ref changes -->

  <!-- Static translations -->
  <footer v-once>
    <p>Version {{ version }}</p>
    <p>{{ copyright }}</p>
  </footer>

  <!-- Large static tree -->
  <div v-once>
    <ProductShowcase :product="initialProduct" />
    <!-- initialProduct changes won't affect this -->
  </div>
</template>

<!-- Vue 3.2+ alternative: v-memo for conditional memoization -->
<template>
  <div v-for="item in list" :key="item.id"
    v-memo="[item.id, item.selected]">
    <!-- Only re-renders if item.id or item.selected changes -->
    <ExpensiveItemRenderer :item="item" />
  </div>
</template>

// Options API
export default {
  mounted() {
    console.log(this.$route.params.id)    // Route param
    console.log(this.$route.query.search) // Query string
    console.log(this.$route.path)         // Current path
    console.log(this.$route.name)         // Route name
  }
}

// Composition API (recommended)
import { useRoute } from 'vue-router'

const route = useRoute()
console.log(route.params.id)
console.log(route.query.search)

// Route definition for context:
const routes = [
  { path: '/users/:id', component: UserProfile }
  //                ↑ This creates params.id
]

<script setup>
import { useCounterStore } from '@/stores/counter'

// Get the store instance
const counter = useCounterStore()

// Access state directly
console.log(counter.count)

// Access getters
console.log(counter.double)

// Call actions
function handleClick() {
  counter.increment()
}

// $patch for bulk updates
counter.$patch({ count: 10, name: 'Updated' })

// $patch with function (for complex updates)
counter.$patch((state) => {
  state.count++
  state.name = `Count: ${state.count}`
})
</script>

<template>
  <p>Count: {{ counter.count }}</p>
  <p>Double: {{ counter.double }}</p>
  <button @click="counter.increment()">Increment</button>
</template>

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('Alice')
const lastName = ref('Martin')

// computed
const fullNameComputed = computed(() => `${firstName.value} ${lastName.value}`)

// method
function fullNameMethod() {
  return `${firstName.value} ${lastName.value}`
}
</script>

<template>
  <p>{{ fullNameComputed }}</p>
  <p>{{ fullNameMethod() }}</p>
</template>

<template>
  <input ref="inputEl" type="text" />
  <button @click="focusInput">Focus</button>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const inputEl = ref(null)

onMounted(() => {
  inputEl.value.focus() // Direct DOM access
})

function focusInput() {
  inputEl.value?.focus()
}
</script>

<template>
  <!-- Internal navigation — client-side, no page reload -->
  <NuxtLink to="/about">About</NuxtLink>

  <!-- Named route -->
  <NuxtLink :to="{ name: 'users-id', params: { id: user.id } }">
    View Profile
  </NuxtLink>

  <!-- External link — renders a plain <a> with a full-page navigation.
       Nuxt adds rel="noopener noreferrer" automatically; it does NOT add
       target="_blank" — set that yourself if you want a new tab. -->
  <NuxtLink to="https://nuxt.com" external target="_blank">Nuxt Website</NuxtLink>

  <!-- Prefetch control — disable for rarely visited pages -->
  <NuxtLink to="/heavy-page" :prefetch="false">Heavy Page</NuxtLink>

  <!-- Custom active class -->
  <NuxtLink to="/" active-class="nav-active" exact-active-class="nav-exact">
    Home
  </NuxtLink>
</template>

import { defineAsyncComponent } from 'vue'

// Basic async component
const HeavyModal = defineAsyncComponent(
  () => import('./components/HeavyModal.vue')
)

// With loading and error states
const AsyncTable = defineAsyncComponent({
  loader: () => import('./components/DataTable.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorDisplay,
  delay: 200,         // Show loading component after 200ms
  timeout: 10000,     // Show error component if not loaded in 10s
  onError(error, retry, fail, attempts) {
    if (attempts <= 3) {
      retry() // Retry up to 3 times on network error
    } else {
      fail()
    }
  }
})

// Route definition
const routes = [
  { path: '/users/:id/profile', name: 'user-profile', component: UserProfile },
  { path: '/settings', name: 'settings', component: Settings }
]

// ✅ Using named routes — resilient to URL changes
router.push({ name: 'user-profile', params: { id: 42 } })

<router-link :to="{ name: 'user-profile', params: { id: user.id } }">
  View Profile
</router-link>

// ❌ Hardcoded path — breaks if URL changes
router.push(`/users/${id}/profile`)
<router-link :to="`/users/${user.id}/profile`">View Profile</router-link>

// useCounter.js
import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const double = computed(() => count.value * 2)

  function increment() { count.value++ }
  function decrement() { count.value-- }
  function reset() { count.value = initialValue }

  return { count, double, increment, decrement, reset }
}

// Usage in any component — each component gets isolated state
import { useCounter } from '@/composables/useCounter'

const { count, double, increment } = useCounter(10)

// 1. Route middleware — runs on client during navigation
// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const { isAuthenticated } = useAuth()

  if (!isAuthenticated.value && to.meta.requiresAuth) {
    return navigateTo('/login', { replace: true })
  }
})

// Used in a page:
definePageMeta({ middleware: 'auth' })

// 2. Global route middleware — runs on ALL navigations
// middleware/analytics.global.ts — .global suffix makes it run everywhere
export default defineNuxtRouteMiddleware((to) => {
  useTrackPageView(to.fullPath)
})

// 3. Server middleware — runs on every HTTP request (Nitro)
// server/middleware/logging.ts
export default defineEventHandler((event) => {
  console.log(`[${new Date().toISOString()}] ${getMethod(event)} ${getRequestURL(event)}`)
  // No return = passes to next handler
  // return something = short-circuits the request
})

<template>
  <!-- v-memo is particularly powerful in v-for with complex items -->
  <div
    v-for="item in largeList"
    :key="item.id"
    v-memo="[item.id, item.selected, item.value]"
  >
    <!-- This entire subtree is skipped if item.id, item.selected,
         and item.value are all the same as last render -->
    <ComplexItemRenderer :item="item" />
    <div class="metadata">
      <span>ID: {{ item.id }}</span>
      <span>Value: {{ item.value }}</span>
      <!-- ... 50 more bindings -->
    </div>
  </div>

  <!-- Without v-memo: ALL items re-render when any item changes -->
  <!-- With v-memo: ONLY items with changed dependency values re-render -->
</template>

// Route-level guard — in route definition
const routes = [
  {
    path: '/admin',
    component: AdminPanel,
    beforeEnter: [requireAdmin, logAccess], // Array of guards
    // or a single function:
    beforeEnter: (to, from) => {
      if (!store.isAdmin) return { name: 'forbidden' }
    }
  }
]

// Component-level in-component guards (Composition API)
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'

// Prompt before leaving unsaved form
onBeforeRouteLeave((to, from) => {
  if (hasUnsavedChanges.value) {
    const confirmed = window.confirm('Leave without saving?')
    if (!confirmed) return false // Cancel navigation
  }
})

// React to param changes on same route (e.g., /user/1 → /user/2)
onBeforeRouteUpdate(async (to, from) => {
  if (to.params.id !== from.params.id) {
    user.value = await fetchUser(to.params.id)
  }
})

// stores/notifications.ts
export const useNotificationStore = defineStore('notifications', () => {
  const items = ref([])

  function add(message: string, type = 'info') {
    items.value.push({ id: Date.now(), message, type })
  }

  return { items, add }
})

// stores/cart.ts — depends on notifications
export const useCartStore = defineStore('cart', () => {
  const items = ref([])

  // ✅ Call useNotificationStore INSIDE the setup function
  // (not at module level) to avoid circular init issues
  const notifications = useNotificationStore()

  async function addItem(product) {
    items.value.push(product)
    notifications.add(`${product.name} added to cart`, 'success')
  }

  return { items, addItem }
})

// Circular dependency pattern — lazy resolution
// stores/a.ts calls b.ts and b.ts calls a.ts
// Solution: access the circular dependency inside an action, not at setup time
export const useStoreA = defineStore('a', () => {
  const data = ref(0)

  function doSomething() {
    const storeB = useStoreB() // ✅ Lazy — called inside action, not during setup
    storeB.notify(data.value)
  }

  return { data, doSomething }
})

<!-- Usage -->
<MyInput v-model="username" />

<!-- Equivalent to: -->
<MyInput :modelValue="username" @update:modelValue="username = $event" />

import { watchEffect, ref } from 'vue'

const searchQuery = ref('')

watchEffect((onCleanup) => {
  const controller = new AbortController()

  // Register cleanup before starting async work
  onCleanup(() => {
    controller.abort() // Cancel previous request when query changes
  })

  fetch(`/api/search?q=${searchQuery.value}`, { signal: controller.signal })
    .then(r => r.json())
    .then(data => { /* update results */ })
    .catch(err => {
      if (err.name !== 'AbortError') throw err
    })
})

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    // SERVER-ONLY — never sent to client
    databaseUrl: '',          // Set via NUXT_DATABASE_URL env var
    jwtSecret: '',            // Set via NUXT_JWT_SECRET
    stripeSecretKey: '',      // Set via NUXT_STRIPE_SECRET_KEY

    // PUBLIC — available on both server and client
    public: {
      apiBase: '/api',        // Set via NUXT_PUBLIC_API_BASE
      appName: 'My App',      // Set via NUXT_PUBLIC_APP_NAME
      gtmId: ''               // Set via NUXT_PUBLIC_GTM_ID
    }
  }
})

<template>
  <nav>
    <button @click="activeTab = 'profile'">Profile</button>
    <button @click="activeTab = 'settings'">Settings</button>
    <button @click="activeTab = 'billing'">Billing</button>
  </nav>

  <!-- Components are cached, not destroyed on tab switch -->
  <KeepAlive :include="['ProfileTab', 'SettingsTab']" :max="5">
    <component :is="activeComponent" />
  </KeepAlive>
</template>

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: {
      requiresAuth: true,
      title: 'Dashboard',
      roles: ['admin', 'manager'],
      transition: 'slide'
    }
  },
  {
    path: '/profile',
    component: Profile,
    meta: { requiresAuth: true, title: 'Profile' }
  },
  {
    path: '/login',
    component: Login,
    meta: { requiresGuest: true, title: 'Sign In' }
  }
]

// Using meta in global guard
router.beforeEach((to) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    return { name: 'login', query: { redirect: to.fullPath } }
  }
  if (to.meta.requiresGuest && isAuthenticated()) {
    return { name: 'dashboard' }
  }
})

// Accessing meta in component
const route = useRoute()
useHead({ title: route.meta.title }) // With @vueuse/head or similar

import { effectScope, ref, watch, computed } from 'vue'

const scope = effectScope()

scope.run(() => {
  const count = ref(0)
  const double = computed(() => count.value * 2)
  watch(count, (val) => console.log('count:', val))
  // All effects here are tracked by the scope
})

// Dispose all effects at once
scope.stop()

// Detached scope — not bound to current component's lifecycle
const pluginScope = effectScope(true) // true = detached from parent scope

pluginScope.run(() => {
  // Safe to create reactive effects here in a plugin
  // Won't be accidentally stopped when a component unmounts
})

// Clean up when Vue app is unmounted
app.onUnmount(() => pluginScope.stop())

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],

  i18n: {
    locales: [
      { code: 'en', language: 'en-US', file: 'en.json', name: 'English' },
      { code: 'fr', language: 'fr-FR', file: 'fr.json', name: 'Français' }
    ],
    defaultLocale: 'en',
    langDir: 'locales/',

    // Strategy: 'prefix' = /fr/about, 'prefix_except_default' = /about (en), /fr/about
    strategy: 'prefix_except_default',

    // Browser locale detection
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      redirectOn: 'root'
    }
  }
})

<!-- Nuxt 3 approach: lazy hydration -->
<script setup>
import { defineAsyncComponent } from 'vue'

// Component hydrated only when it becomes visible
const LazyChart = defineAsyncComponent({
  loader: () => import('./Chart.vue'),
  hydrate: hydrateOnVisible() // From vue3-lazy-hydration or Nuxt
})
</script>

<template>
  <!-- Static HTML — never hydrated (pure server HTML) -->
  <header>
    <Logo />
    <StaticNav />
  </header>

  <!-- Interactive island — hydrated immediately -->
  <SearchBar /> <!-- Users interact with this immediately -->

  <!-- Lazy island — hydrated when scrolled into view -->
  <LazyChart :data="chartData" />

  <!-- Never hydrated — no JavaScript needed -->
  <ArticleContent :content="htmlContent" />
</template>

// SSR — server entry file
import { createApp } from './app'

export async function render(url) {
  const { app, router } = createApp()

  router.push(url)
  await router.isReady() // Wait for initial navigation + all guards to complete

  // Now render — route is correctly resolved
  const html = await renderToString(app)
  return { html }
}

// Testing
import { mount } from '@vue/test-utils'
import { createRouter, createWebHistory } from 'vue-router'

test('dashboard redirects unauthenticated users', async () => {
  const router = createRouter({ history: createWebHistory(), routes })
  const wrapper = mount(App, { global: { plugins: [router] } })

  router.push('/dashboard')
  await router.isReady() // Wait for navigation guards to run

  expect(router.currentRoute.value.name).toBe('login')
})

// Domain stores — single source of truth per entity
// stores/users.ts
export const useUsersStore = defineStore('users', () => {
  const users = ref<Map<string, User>>(new Map())

  function getUser(id: string) { return users.value.get(id) }
  function setUser(user: User) { users.value.set(user.id, user) }

  return { users, getUser, setUser }
})

// stores/posts.ts
export const usePostsStore = defineStore('posts', () => {
  const posts = ref<Post[]>([])
  return { posts }
})

// Feature composable — orchestrates multiple stores
// composables/useBlogFeed.ts
export function useBlogFeed() {
  const postsStore = usePostsStore()
  const usersStore = useUsersStore()
  const { query } = useRoute()

  const feedPosts = computed(() =>
    postsStore.posts
      .filter(p => !query.userId || p.authorId === query.userId)
      .map(p => ({
        ...p,
        author: usersStore.getUser(p.authorId)
      }))
  )

  async function loadFeed() {
    const posts = await api.getPosts()
    // Extract and cache authors without duplicating state
    const authorIds = [...new Set(posts.map(p => p.authorId))]
    const authors = await api.getUsersBatch(authorIds)
    authors.forEach(a => usersStore.setUser(a))
    postsStore.posts = posts
  }

  return { feedPosts, loadFeed }
}

<script setup>
import { defineAsyncComponent } from 'vue'

const HeavyChart = defineAsyncComponent(() =>
  import('./HeavyChart.vue')
)
</script>

<template>
  <Suspense>
    <template #default>
      <HeavyChart />
    </template>
    <template #fallback>
      <div>Loading chart...</div>
    </template>
  </Suspense>
</template>

import { ref, watchEffect, toValue } from 'vue'

export function useFetch(urlOrGetter) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(false)

  watchEffect(async (onCleanup) => {
    const url = toValue(urlOrGetter)
    if (!url) return

    const controller = new AbortController()
    // Register cleanup BEFORE the first await
    onCleanup(() => controller.abort())

    loading.value = true
    error.value = null

    try {
      const response = await fetch(url, { signal: controller.signal })
      if (!response.ok) throw new Error(`HTTP ${response.status}`)
      data.value = await response.json()
    } catch (err) {
      if (err.name !== 'AbortError') error.value = err
    } finally {
      loading.value = false
    }
  })

  return { data, error, loading }
}

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/image'],

  image: {
    // Providers — where images come from
    domains: ['images.unsplash.com', 'cdn.myapp.com'],

    // Default provider (local by default)
    provider: 'ipx', // Built-in: ipx, cloudinary, imgix, bunny, etc.

    // Provider-specific config
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/my-account/image/upload/'
    },

    // Responsive image sizes for srcset
    screens: {
      xs: 320, sm: 640, md: 768, lg: 1024, xl: 1280, xxl: 1536
    }
  }
})

// Step 1: Chrome DevTools > Memory tab > Take snapshot (baseline)
// Step 2: Navigate/mount/unmount the suspected component multiple times
// Step 3: Take another snapshot
// Step 4: Select "Comparison" view — see what objects were retained

// Common Vue leak patterns to look for in heap:
// - 'VNode' objects growing = components not unmounting
// - 'Array' objects growing = event listeners accumulating
// - 'Function' objects growing = closures retaining references

// Programmatic leak detection:
const weakRefs = []

// After component unmounts, the weakRef should be garbage collected
function trackForLeaks(componentInstance) {
  if (typeof WeakRef !== 'undefined') {
    weakRefs.push(new WeakRef(componentInstance))
  }
}

// Later: check if refs are collected
async function checkForLeaks() {
  gc() // Force GC (requires --js-flags=--expose-gc in Chrome)
  const survived = weakRefs.filter(ref => ref.deref() !== undefined)
  console.log(`${survived.length} components still alive after unmount`)
}

// Common leak patterns:
// 1. Event listeners on window/document not removed in onUnmounted
// 2. setInterval not cleared in onUnmounted
// 3. WebSocket not closed in onUnmounted
// 4. Observer (IntersectionObserver, ResizeObserver) not disconnected
// 5. Pinia store subscription not stopped

// Route with named views
const routes = [
  {
    path: '/',
    components: { // Note: plural
      default: MainContent,
      sidebar: Sidebar,
      header: Header
    }
  },
  {
    path: '/dashboard',
    components: {
      default: DashboardMain,
      sidebar: DashboardSidebar,
      header: DashboardHeader
    }
  }
]