Walker World
← Back
前端开发 2025.04.06

Nuxt3: Beginner's Guide and Principles Introduction [Learning Notes]

前端开发

Table of Contents

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

FeatureHow Nuxt Handles It
✅ Page RoutingAutomatically generated based on the pages/ directory structure
✅ Auto Component ImportAutomatically registers components in components/
✅ SSR / SSG / SPABuilt-in support, switch via commands or configuration
✅ API EndpointsSupports writing backend logic in server/api/
✅ State ManagementRecommended to use pinia (Vue’s official state management library)
✅ Build PerformanceDefaults to Vite (fast build) or can switch to Webpack
✅ TypeScriptNative 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