Table of Contents

• Nuxt 3 Getting Started and Principles Introduction
  • 💡 What is Nuxt 3?
  • 🔧 Core Principles
  • 🚀 Quick Start
    • 1. Create Project
    • 2. Directory Structure
  • ✏️ Example Code
    • Page: pages/index.vue
    • API Endpoint: server/api/hello.ts
    • Client-side API Call
  • ✅ Who is Nuxt 3 For?
  • 📚 Recommended Learning Resources

Nuxt 3 Getting Started and Principles Introduction

💡 What is Nuxt 3?

Nuxt 3 is a full-stack frontend framework built on Vue 3 and Vite, supporting:

• Server-Side Rendering (SSR)
• Static Site Generation (SSG)
• Single-Page Applications (SPA)
• Building full-stack applications (with API support)

Nuxt 3 is an “enhanced version” of Vue, helping you simplify project structure and development workflow.

---

🔧 Core Principles

Feature	How Nuxt Handles It
✅ Page Routing	Automatically generated based on the pages/ directory structure
✅ Auto Component Import	Automatically registers components in components/
✅ SSR / SSG / SPA	Built-in support, switch via commands or configuration
✅ API Endpoints	Supports writing backend logic in server/api/
✅ State Management	Recommended to use pinia (Vue’s official state management library)
✅ Build Performance	Defaults to Vite (fast build) or can switch to Webpack
✅ TypeScript	Native support

---

🚀 Quick Start

1. Create Project

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

2. Directory Structure

my-nuxt-app/
├── pages/             # Page directory (automatically becomes routes)
├── components/        # Component directory (auto-imported)
├── layouts/           # Layout pages
├── app.vue            # Global entry file
├── nuxt.config.ts     # Configuration file
├── server/api/        # Backend API directory (for full-stack development)

---

✏️ Example Code

Page: pages/index.vue

<template>
  <h1>Welcome to Nuxt 3</h1>
</template>

Visit http://localhost:3000 to see the effect.

---

API Endpoint: server/api/hello.ts

export default defineEventHandler(() => {
  return { message: 'Hello Nuxt API' }
})

API access address: http://localhost:3000/api/hello

Return result:

{ "message": "Hello Nuxt API" }

---

Client-side API Call

const { data } = await useFetch('/api/hello')

---

✅ Who is Nuxt 3 For?

• Developers who use Vue but don’t want to manually configure build, routing, and SSR
• Those who want to build high-performance, SEO-friendly websites/applications
• Developers who want to use one codebase for frontend + backend APIs

---

📚 Recommended Learning Resources

• Chinese Official Website: https://nuxt.com.cn
• Official Documentation: https://nuxt.com
• Video Courses: Search for “Nuxt3 入门” (Nuxt3 Getting Started) on Bilibili