LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 4218 min read

Server-Side Rendering with Nuxt.js

Understand why Vue needs a companion framework for server rendering, and get an overview of Nuxt.js.

Why Vue Needs Nuxt for SSR

A plain Vue + Vite app renders entirely in the browser — the initial HTML is nearly empty until JavaScript runs. For strong SEO and fast initial paint, you need the HTML rendered on the server first. Nuxt.js is Vue's official framework for exactly this, playing a role for Vue analogous to what Next.js plays for React.

Built by the Same Ecosystem

Nuxt is maintained closely alongside Vue itself, and is the officially recommended path whenever a project needs SSR, static generation, or full-stack capabilities.

Scaffolding a Nuxt Project

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

File-Based Routing in Nuxt

Instead of manually defining a routes array, Nuxt turns files inside a pages/ folder directly into routes, similar in spirit to Next.js's App Router.

pages/
├── index.vue           →  /
├── about.vue            →  /about
└── products/
    └── [id].vue          →  /products/:id

Data Fetching in Nuxt

Nuxt provides useFetch and useAsyncData composables that work identically whether the code runs on the server (first render) or the client (subsequent navigation), avoiding duplicate fetches.

<script setup>
const { data: posts } = await useFetch('/api/posts');
</script>


<template>
  <ul>
    <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
  </ul>
</template>

Server Routes (API Endpoints)

Files inside a server/api/ folder become backend API endpoints, directly analogous to Next.js Route Handlers — Nuxt is genuinely full-stack in the same sense.

// server/api/posts.get.ts
export default defineEventHandler(async () => {
  return await db.post.findMany();
});

FAQs

No — a plain Vue + Vite SPA is perfectly fine for internal tools or apps behind a login where SEO doesn't matter. Reach for Nuxt specifically when SSR, static generation, or built-in API routes are needed.

It requires restructuring around Nuxt's conventions (the pages/ folder, its data-fetching composables) rather than a drop-in migration, but most component code (templates, Composition API logic) transfers directly.

Summary

Nuxt.js gives Vue the same category of full-stack, server-rendering capability that Next.js gives React — file-based routing, SSR, and server API routes in one project. Next, you'll manage environment variables and configuration for a Vue/Nuxt app.

Next Lesson →

Environment Variables