Nuxt.js Interview Questions and Answers

Answer: Framework built on Vue.js for production-ready apps

Nuxt.js is an intuitive Vue framework for building production-ready web applications with features like SSR, SSG, file-based routing, and automatic code splitting.

Answer: Composable for data fetching with SSR support

useFetch() fetches data with SSR support, caching, reactivity. const { data, pending, error } = await useFetch('/api/data'). Auto-handles request deduplication.

Answer: Universal server engine powering Nuxt server

Nitro is universal server engine in Nuxt 3. Provides API routes, SSR, file-based routing, zero-config. Supports multiple deployment targets. Optimized, minimal.

Answer: Deployment configurations for different platforms

Nitro presets configure builds for platforms: node, vercel, netlify, cloudflare. Set in nuxt.config.ts nitro.preset. Auto-detects from environment.

Answer: SSR, SSG, SPA

Nuxt 3 supports Server-Side Rendering (SSR), Static Site Generation (SSG), and Single Page Application (SPA) modes. Can mix modes per route.

Answer: Composable for async data with custom fetching

useAsyncData('key', () => fetchData()) for custom async operations. More flexible than useFetch. Supports any async function. Must provide unique key.

Answer: Middleware running on Nitro server

Server middleware in server/middleware/ runs on all requests. Use for logging, auth, headers. Export event handler. Runs before API routes.

Answer: useFetch is shorthand for useAsyncData with $fetch

useFetch is convenience wrapper around useAsyncData + $fetch. Use useFetch for simple fetching, useAsyncData for complex logic or non-fetch operations.

Answer: Create .vue file in pages/ directory

Create .vue file in pages/ directory. Nuxt automatically generates routes based on file structure. No manual route configuration needed for basic routes.

Answer: Routes automatically generated from pages/ directory structure

File-based routing auto-generates routes from pages/ directory structure. pages/index.vue → /, pages/about.vue → /about. Convention over configuration.

Answer: Caches rendered routes with routeRules

Route caching with routeRules: { '/blog/**': { swr: 3600 } }. Stale-while-revalidate, cache strategies. Hybrid rendering feature. Improves performance.

Answer: Non-blocking data fetching with useLazyFetch

useLazyFetch() and useLazyAsyncData() don't block navigation. Component renders immediately, data loads in background. Good for non-critical data.

Answer: Selective hydration for components

Nuxt Island enables selective hydration. Use <NuxtIsland name="component">. Component hydrates independently. Experimental. Improves performance for static parts.

Answer: Use square brackets: [id].vue

Create dynamic routes with square brackets: pages/users/[id].vue → /users/:id. Access param with useRoute().params.id. Supports nested dynamics.

Answer: Code running before route navigation

Middleware runs before navigation. Define in middleware/ directory. Types: anonymous (inline), named (middleware/auth.ts), global (middleware/auth.global.ts).

Answer: Wrapper component for pages

Layout is a wrapper component for pages. Define in layouts/ directory. Default layout is layouts/default.vue. Switch layouts with definePageMeta({ layout: 'custom' }).

Answer: Export default defineNuxtRouteMiddleware() from middleware/

Create middleware/auth.ts: export default defineNuxtRouteMiddleware((to, from) => {}). Apply with definePageMeta({ middleware: 'auth' }). Access route, context.

Answer: Separates data from HTML for optimized transfers

Payload extraction separates JSON data from HTML. Reduces HTML size, improves caching. Automatic in Nuxt 3. Separate _payload.json files. Experimental feature.

Answer: Automatically splits code into chunks

Code splitting divides code into smaller chunks. Automatic per page, component. Lazy-load with defineAsyncComponent. Improves initial load. Configure chunk strategy.

Answer: Middleware running on every route

Global middleware runs on every route. Name file with .global.ts suffix: middleware/auth.global.ts. No need to register per page. Use sparingly for performance.

Answer: definePageMeta({ layout: 'name' })

Use definePageMeta({ layout: 'custom' }) in script setup. Layout file must exist in layouts/custom.vue. Can disable layout with layout: false.

Answer: Code running when creating Vue app

Plugins run when creating app. Define in plugins/ directory. Use for Vue plugins, provide/inject, error handlers. Auto-registered. Support both server/client.

Answer: Removes unused code from bundles

Tree shaking removes unused exports. Automatic with Vite. Use ES modules, avoid side effects. Configure in build options. Significant bundle size reduction.

Answer: Main configuration file for Nuxt app

nuxt.config.ts is the main configuration file. Configure modules, build options, runtime config, app settings, head meta, CSS, etc. Uses defineNuxtConfig().