Nuxt.js Application Documentation

The Intuitive Vue Framework - Build production-ready Vue applications

Get Started View Guide

Introduction

Welcome to the Nuxt.js application documentation. This comprehensive guide will help you understand, install, configure, and extend your Nuxt application.

Nuxt is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js. It provides server-side rendering, automatic code splitting, powerful routing, and much more out of the box.

Features

Server-Side Rendering

Universal rendering with automatic code splitting for optimal performance.

File-based Routing

Automatic routing based on your file structure in the pages directory.

Auto Imports

Automatically import components, composables, and utilities.

Data Fetching

Built-in composables for fetching data on server and client.

TypeScript Support

First-class TypeScript support with zero configuration.

Rich Ecosystem

Over 200+ modules to supercharge your Nuxt application.

System Requirements

Before installing, ensure your system meets these requirements:

Node.js

Node.js 18.0.0 or higher

Package Manager

npm, yarn, pnpm, or bun

Git

Git version control (recommended)

Code Editor

VS Code with Volar extension

Quick Start

1
Create Nuxt App

Use the official starter to create a new Nuxt project.

# Create a new Nuxt app
npx nuxi@latest init my-nuxt-app

# Navigate to project
cd my-nuxt-app
2
Install Dependencies

Install all required packages using your preferred package manager.

# Using NPM
npm install

# Or using Yarn
yarn install

# Or using pnpm
pnpm install

# Or using Bun
bun install
3
Environment Setup

Create your environment configuration file.

# Create .env file
touch .env

# Add your environment variables
NUXT_PUBLIC_API_BASE=https://api.example.com
DATABASE_URL=postgresql://user:password@localhost:5432/db
4
Start Development Server

Launch the Nuxt development server with Hot Module Replacement.

# Start the development server
npm run dev

# Or with Yarn
yarn dev

# Or with pnpm
pnpm dev

Visit http://localhost:3000 in your browser!

Project Structure

Understanding the Nuxt 3 project structure:

nuxt-app/
├── .nuxt/              # Auto-generated directory (build)
├── assets/             # Uncompiled assets (SCSS, images)
├── components/         # Vue components (auto-imported)
│   ├── AppHeader.vue
│   └── AppFooter.vue
├── composables/        # Composables (auto-imported)
│   └── useAuth.ts
├── layouts/            # Application layouts
│   ├── default.vue
│   └── dashboard.vue
├── middleware/         # Route middleware
│   └── auth.ts
├── pages/              # Application routes
│   ├── index.vue      # /
│   ├── about.vue      # /about
│   └── blog/
│       ├── index.vue  # /blog
│       └── [id].vue   # /blog/:id
├── plugins/            # Plugins to run before app creation
│   └── api.ts
├── public/             # Static files (served at root)
│   └── favicon.ico
├── server/             # Server-side code
│   ├── api/           # API routes
│   │   └── users.ts
│   └── middleware/
├── utils/              # Utility functions (auto-imported)
│   └── formatDate.ts
├── app.vue             # Main application component
├── nuxt.config.ts      # Nuxt configuration
├── package.json        # Dependencies
└── tsconfig.json       # TypeScript config

NPM Scripts

Available Commands

Command Description
npm run dev Start development server with HMR on port 3000
npm run build Build production-ready application
npm run generate Generate static site (SSG)
npm run preview Preview production build locally
npm run postinstall Generate types after installation
npm run typecheck Run TypeScript type checking