Nuxt 3 Getting Started Guide

Nuxt 3 is a universal framework based on Vue 3 that makes building server-side rendered (SSR) Vue applications simple and efficient.

Quick Start

1. Create a Project

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

2. Project Structure

my-blog/
├── app/
│   ├── pages/          # Route pages
│   ├── components/     # Components
│   ├── layouts/        # Layouts
│   └── assets/         # Static assets
├── public/             # Public files
├── nuxt.config.ts      # Nuxt config
└── package.json

Core Concepts

Auto Imports

Nuxt 3 automatically imports Vue APIs and common functions:

<script setup>
const count = ref(0)
const doubled = computed(() => count.value * 2)
</script>

File-based Routing

Files in the pages/ directory automatically generate routes:

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

Server-Side Rendering

Nuxt 3 supports SSR, rendering pages on the server before sending to the client:

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

Static Generation

For content like blogs, you can use static generation:

npm run generate

This generates static HTML files in the dist/ directory, ready to deploy to any static hosting service.

Summary

Nuxt 3 is a powerful framework, especially suitable for building blogs, documentation sites, and other SEO-sensitive applications. Its auto-imports, file-based routing, and SSR features greatly improve development efficiency.

Follow my blog for more tutorials!