Stop 10 · Full-Stack FrameworksTopics · 5/7

Nuxt (Overview)

Part of the Full Stack Developer Roadmap

In short

If you like Vue more than React, Nuxt is your Next.js. Pages, server API routes and server-side rendering live in one project, and most of the wiring is done for you.

The Vue.js equivalent of Next.js — a full-stack framework combining Vue's frontend with server-side rendering and API routes in one project.

The blob character walks into a furnished hostel room with a made bed, desk, lamp and stocked drawers.

Think of it like this

The furnished hostel room

Some hostels hand you an empty room and you buy every bucket and bulb yourself. Others give you a furnished room: bed made, lamp fitted, drawers stocked. Nuxt is the furnished room. Routing, auto-imports and server routes are ready, so you move in and start building.

Watch it happen

Folders become features

my-app

app/

pages/

index.vue

products/

[id].vue

components/

ProductCard.vue

server/api/

products.get.ts

1/5One project holds both the Vue frontend and the server code.

The big ideas

What you need to know

File-based routing

Drop a .vue file into pages/ and it becomes a route. Square brackets in a filename mean a dynamic segment.

Auto-imports

Components, composables and Vue APIs like ref work without import lines. Less typing, but know where things come from.

Server routes built in

Files in server/api/ are backend endpoints. They run on Nitro, which can deploy to Node, serverless or edge hosts.

useFetch for data

useFetch runs during server rendering and hands the result to the browser, so the request isn't made twice.

See it in code

Walk through the code

vue

1// server/api/products.get.ts2export default defineEventHandler(async () => {3  return await db.product.findMany({ take: 20 });4});5 6<!-- app/pages/index.vue -->7<script setup lang="ts">8const { data: products, error } = await useFetch("/api/products");9</script>10 11<template>12  <p v-if="error">Couldn't load products.</p>13  <ul v-else>14    <ProductCard v-for="p in products" :key="p.id" :product="p" />15  </ul>16</template>

1/3The file name decides the route and method: GET /api/products.

defineEventHandler, useFetch and ProductCard are all auto-imported. Nuxt 4 keeps your Vue code under app/ and server code under server/.

Save yourself the pain

Common mistakes

Oops

Using plain fetch inside setup for page data, so it runs on the server and again in the browser.

Do this instead

Use useFetch or useAsyncData. They pass server results to the browser so the request isn't repeated.

Oops

Putting secret keys under runtimeConfig.public.

Do this instead

Keep secrets in the private part of runtimeConfig and read them only in server/ code. Only public keys reach the browser.

Your mission

Your first Nuxt page and API

~30 min

Quick check

In Nuxt, what does creating server/api/orders.post.ts give you?

Go deeper

1Read Nuxt's basic project structure and compare it conceptually to Next.js.
2Understand Nuxt exists because Vue developers wanted the same full-stack-in-one-framework benefits.
3Recognize you don't need to learn Vue to understand this — the pattern is what matters.