Vue.js Developer Interview Questions India 2026: Composition API, Pinia, and Nuxt

Vue 3 core concepts:

1. Options API vs Composition API: Options API (Vue 2 and Vue 3): organise code by option type (data, methods, computed, mounted, watch). The entire component's logic is split into these named sections regardless of which feature they belong to. In large components, related logic for one feature is scattered across multiple options sections.

Composition API (Vue 3): organise code by feature using the setup() function or <script setup> (shorthand). All logic for a feature lives together. Promotes code reuse via composables (functions that use Vue's reactive APIs).

2. ref() and reactive(): - ref(value): wraps a primitive (number, string, boolean) in a reactive container; access the value with .value - reactive(object): makes a plain object reactive; properties are directly accessible (no .value) - computed(() => expression): creates a reactive computed value; cached based on its reactive dependencies; only recomputes when dependencies change - watch(source, callback): runs a side effect when a reactive source changes - watchEffect(callback): runs the callback immediately and re-runs it whenever any reactive dependency inside changes

3. <script setup> (syntactic sugar): ```vue <script setup> import { ref, computed } from 'vue' const count = ref(0) const doubled = computed(() => count.value * 2) function increment() { count.value++ } </script> ``` Variables and functions declared in <script setup> are automatically available in the template. No need to return them.

4. Lifecycle hooks in Composition API: onMounted(), onUpdated(), onUnmounted(): called inside setup(). Equivalent to mounted, updated, beforeDestroy in Options API.

Vue 3 routing and state:

1. Vue Router: Vue Router is the official routing library. Define routes as an array of objects mapping paths to components. createRouter({ history: createWebHistory(), routes }). Programmatic navigation: router.push('/path') or router.push({ name: 'RouteName', params: { id } }). Route params: accessed via useRoute().params in Composition API. Route navigation guards: beforeEach (global guard), beforeEnter (per-route), onBeforeRouteUpdate (in-component; e.g., when navigating between two instances of the same component).

2. Component communication patterns: - Props: parent passes data to child; define with defineProps in <script setup> - Emits: child sends events to parent; define with defineEmits; call emit('event-name', payload) - provide/inject: ancestor provides a value; any descendant can inject it without prop-drilling; useful for app-wide configuration or context - v-model: two-way binding; in Vue 3, v-model on a custom component expands to :modelValue prop + @update:modelValue emit

3. Slots: Slots allow parent components to inject content into child components. Default slot: <slot />. Named slot: <slot name="header" />. Scoped slot: slot exposes data to the parent template (useful for renderless components that provide logic but delegate rendering to the parent).

Pinia (Vue's official state management):

1. Pinia vs Vuex: Pinia replaces Vuex as the official Vue state management library (recommended since Vue 3). Key differences: Pinia has no mutations (Vuex required state, getters, mutations, actions; Pinia has just state, getters, and actions); Pinia is TypeScript-first (full type inference without annotations); Pinia stores are modular by design (each store is an independent module; no need for namespaced modules); Pinia has excellent Devtools support.

2. Defining a Pinia store: ```ts import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, name: 'Eduardo' }), getters: { doubleCount: (state) => state.count * 2, }, actions: { increment() { this.count++ }, async fetchUser(id: string) { this.name = await fetchUserName(id) }, }, }) ```

3. Using a Pinia store: ```vue <script setup> import { useCounterStore } from '@/stores/counter' const counter = useCounterStore() </script>

<template> <p>{{ counter.count }}</p> <p>{{ counter.doubleCount }}</p> <button @click="counter.increment()">+</button> </template> ```

4. Setup stores (alternative syntax): Pinia also supports a setup() function syntax (closer to Composition API) where you use ref/reactive/computed directly and return what you want to expose. This is more flexible for complex stores.

Nuxt.js for production Vue applications:

1. What is Nuxt? Nuxt is Vue's equivalent of Next.js for React. It adds server-side rendering, file-based routing, auto-imports, and a batteries-included developer experience on top of Vue 3. Nuxt 3 is the current version and is built on Nitro (a universal server framework).

2. Rendering modes in Nuxt: - Universal Rendering (SSR): the default; page is rendered on the server and sent as HTML to the browser; React hydrates the HTML into an interactive Vue app; good for SEO and initial load performance - Static Site Generation (SSG): nuxi generate; pages pre-rendered at build time; ideal for content sites and marketing pages - Client-Side Rendering: spa: true; page rendered entirely in the browser; no SEO benefit; use only for authenticated app shells - Hybrid Rendering (Nuxt 3): per-route configuration of the rendering mode; you can SSG some routes and SSR others in the same Nuxt application

3. File-based routing: Nuxt auto-generates routes from the pages/ directory. pages/index.vue becomes /; pages/blog/[slug].vue becomes /blog/:slug. No router configuration needed.

4. Nuxt auto-imports: Nuxt automatically imports composables from the composables/ directory, components from the components/ directory, and Vue APIs (ref, computed, watch). You do not need to import ref or useRoute; Nuxt makes them globally available.

5. Server routes (Nuxt as a full-stack framework): Files in the server/api/ directory become API endpoints. server/api/users.get.ts exports a handler that runs on the server; accessed via /api/users. This is how Nuxt replaces the need for a separate Node.js/Express backend for simple full-stack applications.