How do I set up environment & create first app?

# Prerequisites - Install Node.js 20.x or newer (even-numbered LTS recommended). - Use VS Code with Volar extension or WebStorm. # Create Project 1. Run: `npm create nuxt@latest my-nuxt-app` 2. `cd my-nuxt-app` 3. `npm run dev -- -o` (opens browser at http://localhost:3000). Explore the generated app with welcome page.

How do I understand directory structure & routing?

# Key Dirs - `pages/`: File-based routing (e.g., `pages/index.vue` → `/`). - `app.vue`: Root with ` `. # Add Pages 1. Create `pages/about.vue`: ```vue About Us ``` 2. Visit `/about`. # Dynamic Routes Create `pages/users-[group]/[id].vue`: ```vue const { group, id } = useRoute().params {{ group }} - {{ id }} ``` Visit `/users-admins/123`.

How do I fetch data with composables?

# useFetch & useAsyncData In `pages/posts.vue`: ```vue const { data: posts } = await useFetch('/api/posts') {{ post.title }} ``` # Client Fetch Use `$fetch` for forms: ```ts async function addPost() { await $fetch('/api/posts', { method: 'POST', body: { title: 'New' } }) } ``` Simulate API or use JSONPlaceholder.

How do I build components, layouts & styling?

# Components Auto-import from `components/`: Create `components/Header.vue`, use ` `. # Layouts `layouts/default.vue`: ```vue ``` Set in page: `definePageMeta({ layout: 'default' })`. # Assets - `public/`: Static (e.g., images at root). - `assets/`: Processed CSS/images.

How do I manage state, build & deploy?

# State Use `useState('counter', () => 0)` for reactive SSR state. # Build `npm run build` (Node) or `nuxt generate` (static). # Deploy Static Upload `.output/public/` to Netlify/Vercel. # Node Server `node .output/server/index.mjs` (set `PORT=3000`).

Master Nuxt.js: Build SSR Vue Apps in 5 Steps

🧰

Instant Toolkit

2 artifacts

📋
Step-by-Step Guide

1

Prerequisites

Install Node.js 20.x or newer (even-numbered LTS recommended).
Use VS Code with Volar extension or WebStorm.

Create Project

Run: npm create nuxt@latest my-nuxt-app
cd my-nuxt-app
npm run dev -- -o (opens browser at http://localhost:3000).

Explore the generated app with welcome page.

Why this step matters:

-Establishes a working dev setup for hands-on practice
-Lets you see Nuxt's auto-configured SSR in action immediately

30-60 minutes

Node.js 20+, VS Code + Volar, Terminal

$0

Definition of Done

•Dev server runs without errors at localhost:3000
•Welcome page loads with SSR hydration

Common Mistakes to Avoid

❌ Using Node.js <20 leads to errors

→Install via nvm: `nvm install 20` and `nvm use 20`

❌ Skipping `-o` flag, browser doesn't open

→Always use `npm run dev -- -o` for convenience

2

Following along, or just reading? 👀

Spin up a personalized “learn Nuxt.js” plan you can save, check off, and return to anytime — unlimited on the free trial.

Start free trial →

3

4

5

🎥
Suggested Videos

Nuxt.JS for Beginners: Build Your First App

Nuxt 3 — Course for Beginners

📚
Learning Resources

📖 Online Courses

Mastering Nuxt

beginner

Paid

MasteringNuxt

Fundamentals of NuxtJS

beginner

Coursera

📖 Recommended Books

Hands-on Nuxt.js Web Development

beginner

by Patrick Boivin

Nuxt 3 Projects

intermediate

by Unknown

🌐 Helpful Websites

Nuxt Official Documentation

documentation

Comprehensive guides from installation to advanced concepts

Nuxt GitHub Repo

github

Source code, issues, and quick start README

🛠️ Useful Tools

Nuxt CLI

CLI

Scaffolds and manages Nuxt projects

Volar

Editor

VS Code extension for Vue/Nuxt TypeScript support

Master Nuxt.js: Build SSR Vue Apps in 5 Steps