Question 1

Is Nuxt.js worth learning in 2026 given Next.js dominance?

Accepted Answer

Yes if your team or target employer is on Vue — Nuxt is the de-facto Vue meta-framework and there's no real alternative in that ecosystem. No if you'd be the only Vue person at a React shop. The skill is genuinely transferable: most of what you learn (SSR vs SSG, hydration, server routes, route rules) applies to Next.js conceptually too.

Question 2

How much does a Nuxt.js developer earn in India?

Accepted Answer

₹6-20 LPA in 2026 for mid-to-senior frontend roles with Nuxt as a primary skill. Lower end (₹6-10 LPA) for 1-3 years experience at agencies and D2C brands; upper end (₹15-20 LPA) for senior engineers at product companies (BlueStone, Mosaic Wellness, Tata CLiQ). Specialised Nuxt + e-commerce + Magento-migration experience can clear ₹25 LPA at top product cos. Demand is lower than React/Next but so is supply, so good Nuxt devs find work quickly.

Question 3

Should I learn Nuxt 3 or wait for Nuxt 4?

Accepted Answer

Learn Nuxt 3 now. The migration from 3 to 4 is small — mostly defaults changing and a few API tweaks. Nuxt 4 RC mostly adds lazy hydration and bundle improvements; nothing in 3 is being deprecated. Most of the public Nuxt 4 features are also flag-gated in late Nuxt 3 versions, so you can preview them without waiting.

Question 4

What's the difference between Nuxt 2 and Nuxt 3?

Accepted Answer

Big jump. Nuxt 2 = Vue 2 + Webpack + Options API + Vuex; Nuxt 3 = Vue 3 + Vite + Composition API + Pinia + Nitro server engine. Auto-imports, TypeScript-first, native SSG/SSR/ISR/SPA hybrid mode, edge deployment — none of that existed in Nuxt 2. If you're maintaining a Nuxt 2 app in 2026, the migration to Nuxt 3 is a near-rewrite for non-trivial codebases; budget weeks, not days. Nuxt 2 reached EOL on 30 June 2024.

Question 5

Can I use Tailwind CSS with Nuxt 3?

Accepted Answer

Yes — `@nuxtjs/tailwindcss` is one of the most-installed Nuxt modules. Add it to `modules` in `nuxt.config.ts` and you're done; the module wires up the PostCSS config, generates the Tailwind config file on first run, and integrates with HMR. Alternatives in 2026: UnoCSS via `@unocss/nuxt` (atomic CSS, smaller bundles), and Nuxt UI (Tailwind-based component library built by the Nuxt team).

Question 6

What is Nuxt.js and how is it different from plain Vue?

Accepted Answer

Nuxt.js is a meta-framework that wraps Vue 3 to give you everything you'd otherwise build yourself for a production app: file-based routing, server-side rendering, static site generation, a server runtime (Nitro), auto-imports for components and composables, a module ecosystem, and a typed configuration layer. Plain Vue is just the view layer — you'd need to wire up Vue Router, a build tool, an SSR bridge, an API server, and routing conventions on your own. The trade is convention over configuration: Nuxt makes 80% of decisions for you in exchange for being opinionated. In 2026, the Nuxt 3 line (built on Vite + Nitro + Vue 3) is the stable choice; Nuxt 4 RC is shipping with lazy hydration and a slimmer bundle baseline.

Question 7

How does file-based routing work in Nuxt 3?

Accepted Answer

Any `.vue` file under `pages/` becomes a route. The filename maps to the URL path: `pages/index.vue` → `/`, `pages/about.vue` → `/about`, `pages/blog/[slug].vue` → `/blog/:slug` (dynamic), `pages/[...all].vue` → catch-all. Nested folders create nested routes, and `_` prefix marks private files Nuxt ignores. You also need a `<NuxtPage />` component in your `app.vue` for the matched page to render. The route params show up via `useRoute().params.slug`. No manual router config — Nuxt scans the directory at build time and generates the router config for you.

Question 8

What are pages, layouts, and components in Nuxt 3?

Accepted Answer

Three directories with distinct roles. `pages/` defines routes (one file = one URL). `layouts/` defines the chrome around pages — header, footer, sidebar — and a page chooses one via `definePageMeta({ layout: 'admin' })`. `components/` holds reusable UI bits and they're auto-imported, so `` works anywhere without an import statement. Sub-folder structure becomes part of the component name: `components/forms/SignupForm.vue` → ``. There's also `components/global/` for components that should be available in markdown content or dynamic templates without explicit registration. The `default.vue` layout is used unless a page opts into another.

Question 9

What are composables in Nuxt 3 and how are they auto-imported?

Accepted Answer

Composables are Vue 3 functions that encapsulate reactive state and logic — the Composition-API equivalent of React hooks. Any file in `composables/` is auto-imported, exposed by its filename (camelCased). So `composables/useCounter.ts` exporting a `useCounter()` function becomes globally available — no import needed. Nuxt 3 also auto-imports its own built-ins: `useFetch`, `useAsyncData`, `useState`, `useRoute`, `useRouter`, `useRuntimeConfig`, `useNuxtApp`, and more. The auto-import is type-aware via the generated `.nuxt/types/imports.d.ts`, so TypeScript and your editor know what's in scope.

Question 10

What is the `app.vue` file in Nuxt 3?

Accepted Answer

`app.vue` is the root component for the entire app — it's the only file that's required at the top level. It typically renders `` wrapping ``, which gives you the layout-around-page composition. If you don't have an `app.vue`, Nuxt provides a default one. Putting `app.vue` in your project lets you control global wrappers like dark-mode containers, global error boundaries, or things that should render on every route. Keep it thin — most logic should live in layouts or pages.

Question 11

How do you fetch data in a Nuxt 3 page?

Accepted Answer

Use `useFetch()` for typed, SSR-safe data fetching. It runs once on the server during SSR and the result is serialised into the HTML payload, so the client doesn't refetch on hydration. The return value is reactive: `{ data, pending, error, refresh }`. For more control (custom keys, transforming the response), use `useAsyncData()` and pass `$fetch` inside. Avoid raw `fetch()` in setup — it bypasses Nuxt's SSR cache, so you double-fetch on hydration. `$fetch` (no `use`) is for client-side or event-handler calls.

Question 12

How do you create a server route in Nuxt 3?

Accepted Answer

Drop a file in `server/api/`. Nitro picks it up and exposes it at the matching URL. Each file exports a default handler wrapped in `defineEventHandler()`. The event object gives you helpers: `getQuery(event)` for query params, `readBody(event)` for POST bodies, `getRouterParam(event, 'id')` for dynamic segments, and `setResponseStatus(event, 201)` for status codes. Dynamic routes use the same `[param]` convention: `server/api/users/[id].get.ts`. The `.get`/`.post`/`.put`/`.delete` suffix restricts the handler to that HTTP method.

Question 13

What is `useState` in Nuxt 3 and how is it different from `ref`?

Accepted Answer

`useState(key, factory)` is Nuxt's SSR-safe global state primitive. The key uniquely identifies the state across the app, so two components using the same key share the same reactive value. Crucially, it serialises across the SSR boundary — values set on the server are hydrated on the client, so you don't lose state on the client side. Plain `ref()` works fine inside a single component but is per-instance: two components creating `const count = ref(0)` get independent counters. For cross-component shared state, you use `useState` (or Pinia for anything non-trivial). For private component state, you use `ref`/`reactive`.

Question 14

How do you handle SEO meta tags in Nuxt 3?

Accepted Answer

Use `useHead()` or the higher-level `useSeoMeta()` composable in setup. They reactively update ``, `<meta>`, Open Graph tags, JSON-LD, and link tags. Because Nuxt renders these on the server during SSR, crawlers see them in the initial HTML — critical for SEO. `useSeoMeta()` is the preferred API in 2026: it has typed props for every standard meta tag, including Twitter and Open Graph variants. You can also set meta from `definePageMeta()` for static values that don't depend on fetched data.

Question 15

What is `nuxt.config.ts` and what goes in it?

Accepted Answer

`nuxt.config.ts` is the single source of project configuration: modules to load, build options, runtime config (env vars), routing rules (hybrid rendering), CSS files, app meta, Nitro options (preset, prerender list), and TypeScript settings. The `defineNuxtConfig({})` wrapper gives you full type-safety and autocomplete. Anything that needs to be controlled at build time goes here — runtime-only secrets should go in `runtimeConfig` (private side) so they're not bundled to the client.

Nuxt.js Interview Questions

What is Nuxt.js and how is it different from plain Vue?

How does file-based routing work in Nuxt 3?

What are pages, layouts, and components in Nuxt 3?

What are composables in Nuxt 3 and how are they auto-imported?

What is the `app.vue` file in Nuxt 3?

How do you fetch data in a Nuxt 3 page?

How do you create a server route in Nuxt 3?

What is `useState` in Nuxt 3 and how is it different from `ref`?

How do you handle SEO meta tags in Nuxt 3?

What is `nuxt.config.ts` and what goes in it?

How do you handle navigation programmatically in Nuxt 3?

What is route middleware in Nuxt 3?

What are the rendering modes in Nuxt 3 and when do you use each?

What is the difference between `useFetch`, `useAsyncData`, and `$fetch`?

What is hybrid rendering and how does ISR work in Nuxt 3?

How do you manage state across components in Nuxt 3?

What causes hydration mismatches in Nuxt 3 and how do you fix them?

How do you make code run only on the server or only on the client?

How does `useFetch` caching work and when does it cause bugs?

How do you implement authentication in a Nuxt 3 app?

What is `nuxt/content` and when do you use it?

How do you handle errors in Nuxt 3?

How do you write tests for a Nuxt 3 app?

What are Nuxt modules and how do you write one?

What are Nuxt plugins and how do they differ from modules?

How do you optimize a Nuxt 3 app for production performance?

How does Nitro work and why is it called a 'server engine'?

How would you architect a high-traffic e-commerce site on Nuxt 3?

How do you implement on-demand ISR revalidation in Nuxt 3?

How do you compare Nuxt 3 vs Next.js for a new project in 2026?

Companies Hiring Nuxt.js

Salary Insights

Frequently Asked Questions

Is Nuxt.js worth learning in 2026 given Next.js dominance?

How much does a Nuxt.js developer earn in India?

Should I learn Nuxt 3 or wait for Nuxt 4?

What's the difference between Nuxt 2 and Nuxt 3?

Can I use Tailwind CSS with Nuxt 3?

Introduction