After creating a new Vue project, the first hours often vanish into configuring vue-router, adjusting build settings, and implementing SEO workarounds, only to discover that client-side rendering still hurts performance. Balancing configuration control with production-grade speed becomes a recurring headache.

Nuxt eliminates this friction. The framework adds server-side rendering, static generation, file-based routing, and automatic code-splitting to Vue, all configured through a single nuxt.config.ts file. You keep the Vue syntax you know while Nuxt handles the architectural decisions, from performance defaults to SEO readiness, out of the box.

In brief:

• Nuxt 4 builds on Vue 3, Vite, and the Nitro server engine to deliver SSR, SSG, and hybrid rendering without manual configuration.
• The app directory and shared/ folder give full-stack developers clear separation between client, server, and universal code.
• routeRules let you mix rendering strategies per route, so marketing pages can be static while dashboards use live SSR.
• Integration with headless CMS platforms like Strapi requires minimal setup, creating a workable content workflow.

What Is Nuxt?

Nuxt is a meta-framework built on Vue.js that handles the production setup you'd otherwise configure manually. Nuxt 4, the current major release, is built on Vue 3, Vite, and the Nitro server engine. While Vue gives you reactive components and the Composition API, the Nuxt.js framework adds server-side rendering, static site generation, automatic code splitting, and file-based routing without the usual build-tool configuration headaches.

You still write .vue components and use familiar syntax. The difference is infrastructure. Need SEO-friendly HTML pre-rendering? Built in. Route generation is based on your file structure. Capabilities that typically require additional libraries and configuration files come ready to use.

This Vue.js meta-framework targets the gap between Vue's component model and what production applications actually need: crawlable pages for search engines, optimized bundles for performance, and a server layer for API endpoints and data fetching. Instead of assembling those pieces yourself, wiring up vue-router, configuring vue-server-renderer, and tuning webpack for SSR, Nuxt provides opinionated defaults that work immediately.

The result is a direct path from npx nuxi init to a scalable, production-ready application. You spend more time on features and less on setup.

Core Nuxt Features

When you start a Vue project from scratch, hours disappear into router setup, build tooling, and architectural debates. Nuxt removes that overhead with opinionated features that work the moment you scaffold a project. Here's how each one eliminates low-value work.

File-Based Routing

Any .vue file you place in the app/pages/ directory instantly becomes a route, including dynamic segments:

<!-- app/pages/users/[id].vue -->
<script setup>
const { id } = useRoute().params
</script>

<template>
  <h1>User {{ id }}</h1>
</template>

This file renders at /users/42 without a single line of router code. The convention covers nested folders, middleware assignment, and layout binding. Need edge-case customization? You can still extend routes manually. But for the vast majority of pages, dropping a file into the right directory is all it takes. As of Nuxt 4.4, route generation uses a trie data structure that's up to 28× faster when pages aren't added or removed.

Rendering Modes: SSR, SSG, and Hybrid

Three acronyms, three different strategies for getting HTML to the browser:

• Server-Side Rendering (SSR): The server generates fresh HTML for every request. Ideal for pages with real-time data like dashboards or personalized content.
• Static Site Generation (SSG): Pages are pre-rendered at build time into flat HTML files. Perfect for marketing pages and blog posts that don't change between deployments.
• CSR: The browser handles all rendering. Useful for authenticated admin panels where SEO doesn't matter.

Nuxt lets you assign these per route using routeRules in nuxt.config.ts. Keep product listings pre-rendered for speed, serve user dashboards with live SSR, and flip internal tools to CSR, all in the same codebase, no migration required:

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/dashboard/**': { ssr: true },
    '/admin/**': { ssr: false },
  },
})

Nitro Server Engine

Nitro is Nuxt's built-in server engine. Server routes turn a file in /server/api/ into a live endpoint:

// server/api/hello.ts
export default defineEventHandler((event) => {
  return { message: 'Hello World' }
})
// Available at /api/hello

The same engine that renders your pages server-side also runs these API routes. Authentication logic, database queries, third-party integrations: write them once alongside your Vue code. No Express setup, no separate repository.

Nitro abstracts deployment targets through deployment presets: Node.js, Vercel, Netlify, Cloudflare Workers, Deno, Bun, and edge runtimes. The same codebase compiles for whichever platform you choose. Major providers like Vercel and Cloudflare are auto-detected in CI/CD environments, so deployment often requires zero configuration.

Developer Experience: Auto-Imports, TypeScript, and Modules

Nuxt auto-imports any component placed in app/components/ and any composable in app/composables/, so templates stay clean of import statements. Auto-imports are tree-shaken from production bundles.

TypeScript support ships pre-configured. Nuxt 4 generates four contexts for app/, server/, shared/, and build-time code, so your IDE knows whether code is client-side or server-side, eliminating false positives from type augmentations leaking across contexts.

When you need extras, image optimization, internationalization, and analytics, you add a module from the 312+ available in the official registry. Nuxt DevTools, an in-app floating panel activated with Shift + Alt + D, gives you route inspection, component dependency graphs, a built-in API playground for server routes, and runtime config editing, all without leaving the browser.

What's New in Nuxt 4

Nuxt 4 focuses on clearer project organization, smarter data fetching, and improved TypeScript inference. Most changes were available as opt-in flags for over a year before the official release, so migration is incremental rather than disruptive.

The app/ Directory Structure

The most visible change: all Vue application code moves from the project root into an app/ subdirectory. What was pages/ becomes app/pages/. What was components/ becomes app/components/. The server/ directory stays at the project root, and a new shared/ folder sits alongside it for code that both client and server need: validation schemas, type definitions, utility functions.

project-root/
├── nuxt.config.ts
├── app/            ← Vue application code
│   ├── pages/
│   ├── components/
│   ├── composables/
│   └── app.vue
├── server/         ← Nitro server code (unchanged)
│   └── api/
├── shared/         ← NEW: code shared between app and server
│   ├── utils/
│   └── types/
└── public/

Files in shared/utils/ and shared/types/ are auto-imported into both contexts. The constraint: shared code can't import Vue-specific or Nitro-specific APIs, it must remain framework-agnostic.

Backward compatibility is built in. Nuxt 4 automatically detects existing Nuxt 3 project layouts and continues working without moving any files. An official codemod handles the physical migration when you're ready:

npx codemod@latest nuxt/4/migration-recipe

Improved Data Fetching and TypeScript

Nuxt 3.17 updates

Automatic sharing across components. Multiple components calling useAsyncData with the same key now share the same data, error, and status refs. When one refreshes, all update simultaneously, no manual state synchronization.

Reactive keys. Computed refs and getter functions work as keys. Change the key value and Nuxt triggers a new fetch while cleaning up the old cached data automatically:

const userId = ref('123')
const { data: user } = useAsyncData(
  computed(() => `user-${userId.value}`),
  () => fetchUser(userId.value)
)
// Changing userId triggers a new fetch and cleans up old cached data
userId.value = '456'

Cleanup on unmount. Cached data from useAsyncData is automatically purged when the component unmounts, preventing memory leaks in long-lived applications.

Shallow reactivity by default. The data ref is now a shallowRef instead of a deep ref, a meaningful performance gain for deeply nested API responses. Vue no longer watches every nested property. Opt back into deep reactivity per call with { deep: true } when needed.

TypeScript inference benefits from the new TypeScript contexts: .nuxt/tsconfig.app.json, .nuxt/tsconfig.server.json, .nuxt/tsconfig.shared.json, and .nuxt/tsconfig.node.json. Your IDE accurately resolves types based on whether code runs in the browser, on the server, or in both.

Nuxt vs. Other Frameworks

Choosing a meta-framework shapes how you think about routing, rendering, and deployment. If you're productive in Vue, the comparison mostly comes down to ecosystem fit.

Nuxt vs. Plain Vue

Plain Vue excels for lightweight single-page apps: fast scaffolding, minimal opinions, total structural freedom. You manage routing, SSR, SEO, and build optimization yourself. Nuxt wraps that same Vue syntax with production defaults, file-based routing, server-side rendering, and automatic code splitting, so you skip the infrastructure assembly without switching component models.

What Can You Build with Nuxt?

The framework runs production sites that need speed, search visibility, and team scalability. Here's where it fits best.

Content Sites and E-Commerce

Blog networks, product catalogs, and marketing sites benefit directly from Nuxt's rendering flexibility. Pre-render catalog pages at build time for CDN-friendly delivery during traffic spikes. Serve product detail pages with live inventory data through SSR. Connect a headless CMS platform like Strapi through server API routes and you have an SEO-optimized storefront without managing separate backend services. The entire stack stays in Vue.

Here's a guide on how to set up an ecommerce store with Nuxt.js and Strapi.

SaaS and Enterprise Applications

Complex dashboards with role-based access need a structure that scales with your team. Nuxt's opinionated directory layout, app/layouts/, app/middleware/, app/plugins/, keeps everyone aligned while preserving flexibility for overrides. Authentication becomes a module installation instead of custom wiring across every protected route. The shared/ directory eliminates duplication of validation logic and types between frontend and backend. You get a unified Vue codebase that scales from prototype to multi-tenant SaaS without architectural rewrites.

SEO with Nuxt: What It Actually Does

The article has mentioned SEO several times. Here's what Nuxt actually provides under the hood.

useSeoMeta() is the recommended approach for meta tags. It offers typed properties with automatic mapping between camelCase keys and correct HTML attributes: ogTitle becomes <meta property="og:title">, twitterCard becomes <meta name="twitter:card">:

<script setup lang="ts">
useSeoMeta({
  title: 'My Blog Post',
  ogTitle: 'My Blog Post',
  description: 'A practical guide to building with Nuxt.',
  ogDescription: 'A practical guide to building with Nuxt.',
  ogImage: 'https://mysite.com/og-image.png',
  twitterCard: 'summary_large_image',
})
</script>

For lower-level control, useHead() handles <title>, <link>, and arbitrary <meta> tags, including canonical URLs.

Sitemap generation comes via the @nuxtjs/sitemap module. Install it, set your site URL in nuxt.config.ts, and visit /sitemap.xml:

export default defineNuxtConfig({
  modules: ['@nuxtjs/sitemap'],
  site: { url: 'https://mysite.com' },
})

Robots.txt works two ways: drop a static file in public/robots.txt, or install the @nuxtjs/robots module for environment-aware rules that block crawlers in staging but allow them in production. Both modules integrate with Nuxt DevTools for visual verification.

Building Your First Nuxt 4 App

Follow these steps to build your first Nuxt application.

1. Scaffold and start the dev server:

npx nuxi init my-nuxt-app
cd my-nuxt-app
npm install
npm run dev

The CLI generates the Nuxt 4 project structure, app/, server/, nuxt.config.ts, with Vite for hot module replacement and Nitro for server-side rendering during development.

2. Add a page:

Create app/pages/about.vue:

<template>
  <section>
    <h1>About Nuxt</h1>
    <p>This page was created in seconds.</p>
  </section>
</template>

Save and visit /about. The file-based router picks it up instantly, no restart, no route table to edit. Dynamic routes work the same way: app/pages/blog/[slug].vue maps to /blog/my-post.

3. Fetch data on the server:

Replace app/pages/index.vue:

<script setup>
const { data: post } = await useFetch('https://jsonplaceholder.typicode.com/posts/1')
</script>

<template>
  <article v-if="post">
    <h1>{{ post.title }}</h1>
    <p>{{ post.body }}</p>
  </article>
</template>

useFetch runs server-side during the initial request. The HTML that reaches the browser already contains the post content, critical for performance and SEO. In Nuxt 4, the returned data is a shallowRef by default for better performance with nested objects.

4. Build for production:

npm run build

Nitro deployment creates a server bundle plus hashed static assets. Need a fully static site instead? Run npx nuxi generate and every route prerenders as a flat file, same code, no changes required.

Deploy the output to Vercel, Netlify, Cloudflare, or a bare VPS. Nitro auto-detects major platforms, so deployment configuration is often zero.

Compared to setting up vue-router, SSR, and webpack manually, you've skipped dozens of decisions and hundreds of lines of boilerplate.

Nuxt + Strapi 5: Full-Stack Integration

Nuxt and Strapi integrate with minimal configuration, giving you a headless CMS and API layer that work together for content-driven applications.

Setting Up Strapi 5

Scaffold a Strapi project:

npx create-strapi@latest my-cms

The Admin Panel boots at http://localhost:1337/admin. Use the Content-Type Builder to model your data, create Collection Types like Article or Product, and Strapi generates REST endpoints automatically under /api.

Before your Nuxt frontend can access content, configure permissions in Strapi's Settings. Grant the public role read access to the collections you want to display. You can layer in JWT and social authentication later for protected routes.

Connecting Nuxt to Strapi

Install the official module:

npx nuxi@latest module add strapi

Configure it in nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxtjs/strapi'],
  strapi: {
    version: 'v5',
    prefix: '/api'
  }
})

Fetch content in any page with the auto-imported composable. For production, wrap calls in useAsyncData for proper SSR hydration:

<!-- app/pages/articles.vue -->
<script setup lang="ts">
const { findOne, find } = useStrapi()

const { data: articles } = await useAsyncData(
  'articles',
  () => find('articles')
)
</script>

<template>
  <article v-for="item in articles?.data" :key="item.id">
    <h2>{{ item.title }}</h2>
    <p>{{ item.summary }}</p>
  </article>
</template>

The module handles URL construction, error states, and TypeScript generics on all methods. Since server-side rendering executes the fetch during the initial request, search engines receive full HTML for better SEO performance. When Strapi's schema changes, typed responses catch mismatches at compile time rather than in production.

Start Building with Nuxt

Your Vue expertise transfers directly: same component syntax, same reactive patterns, same mental model. Nuxt adds the production infrastructure: file-based routing, multiple rendering modes, automatic code splitting, and built-in SEO tooling.

Start with the quick-start steps above to see it in action, or add the @nuxtjs/strapi module to an existing project for a complete content management workflow. The Nuxt + Strapi integration guide walks through live content fetching in production. Both paths prove the same point: the framework handles production concerns while you focus on building features.

Get Started in Minutes

Run npx create-strapi-app@latest in your terminal and follow our Quick Start Guide to build your first Strapi project.

• View Quick Start Guide