Installation - Nuxt.js Application

System Requirements

Before installing, make sure you have the following installed on your system:

Node.js

Version 18.0.0 or higher required

# Check Node.js version
node --version

# Should output: v18.0.0 or higher

Package Manager

npm, yarn, pnpm, or bun

# Check package manager version
npm --version
yarn --version
pnpm --version
bun --version

Download Node.js: Visit nodejs.org to download and install the latest LTS version (v18+).

Recommended: Use VS Code with the Volar extension for the best development experience.

Quick Setup with Nuxi

The easiest way to create a new Nuxt application using nuxi CLI.

Create New Project

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

# Navigate to project
cd my-nuxt-app

# Install dependencies
npm install

# Start development server
npm run dev

Using Different Package Managers

# Using pnpm (recommended for speed)
pnpm dlx nuxi@latest init my-app
cd my-app
pnpm install
pnpm dev

# Using yarn
yarn dlx nuxi@latest init my-app
cd my-app
yarn install
yarn dev

# Using bun
bunx nuxi@latest init my-app
cd my-app
bun install
bun dev

Installation Options

During installation, you'll be prompted to choose:

Package Manager: npm, yarn, pnpm, or bun
Initialize git repository: Yes/No

Quick Start: Nuxt 3 uses TypeScript by default with zero configuration needed!

Popular Nuxt Modules

Supercharge your Nuxt app with powerful modules from the ecosystem.

Essential Modules

# Tailwind CSS
npm install --save-dev @nuxtjs/tailwindcss
npx nuxi@latest module add tailwindcss

# Pinia (State Management)
npm install @pinia/nuxt pinia
npx nuxi@latest module add pinia

# Nuxt UI (Component Library)
npm install @nuxt/ui
npx nuxi@latest module add @nuxt/ui

# Nuxt Image (Image Optimization)
npm install @nuxt/image
npx nuxi@latest module add image

# Nuxt Content (File-based CMS)
npm install @nuxt/content
npx nuxi@latest module add content

Configure Modules

Add modules to your nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss',
    '@pinia/nuxt',
    '@nuxt/ui',
    '@nuxt/image',
    '@nuxt/content'
  ]
})

Popular Modules Table

Module	Purpose	Installation
`@nuxtjs/tailwindcss`	Tailwind CSS integration	`npx nuxi module add tailwindcss`
`@pinia/nuxt`	State management	`npx nuxi module add pinia`
`@nuxt/ui`	UI component library	`npx nuxi module add @nuxt/ui`
`@nuxt/image`	Image optimization	`npx nuxi module add image`
`@nuxt/content`	File-based CMS	`npx nuxi module add content`
`@nuxtjs/supabase`	Supabase integration	`npx nuxi module add supabase`

Module Ecosystem: Explore 200+ modules at nuxt.com/modules

Installing Dependencies

Essential Packages

# Authentication with Auth.js (NextAuth)
npm install @sidebase/nuxt-auth

# Prisma ORM
npm install prisma @prisma/client
npx prisma init

# Form handling with VeeValidate
npm install vee-validate @vee-validate/zod zod

# HTTP client (already included in Nuxt)
# Use $fetch or useFetch composable

# Date formatting
npm install date-fns

UI Libraries

# Nuxt UI (Recommended)
npx nuxi module add @nuxt/ui

# Or PrimeVue
npm install primevue
npx nuxi module add primevue

# Or Vuetify
npm install vuetify
npx nuxi module add vuetify

# Or Element Plus
npm install element-plus
npx nuxi module add element-plus

Development Dependencies

# ESLint
npm install --save-dev @nuxt/eslint-config eslint

# Vitest for testing
npm install --save-dev @nuxt/test-utils vitest

# Sass/SCSS
npm install --save-dev sass

Environment Variables

Configure your environment variables for different environments.

Create Environment Files

# Create .env file
touch .env

# For production
touch .env.production

# For development (optional)
touch .env.development

Example .env

# Public variables (exposed to client)
NUXT_PUBLIC_API_BASE=https://api.example.com
NUXT_PUBLIC_SITE_URL=http://localhost:3000

# Private variables (server-side only)
DATABASE_URL=postgresql://user:password@localhost:5432/mydb
SECRET_KEY=your-secret-key-here
STRIPE_SECRET_KEY=sk_test_xxxxx

# OAuth credentials
GITHUB_CLIENT_ID=xxx
GITHUB_CLIENT_SECRET=xxx

Using in nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    // Private keys (server-side only)
    apiSecret: process.env.API_SECRET,

    // Public keys (exposed to client)
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || 'https://api.example.com'
    }
  }
})

Accessing Runtime Config

// In components or pages
const config = useRuntimeConfig()
console.log(config.public.apiBase)

// In server routes
export default defineEventHandler((event) => {
  const config = useRuntimeConfig()
  console.log(config.apiSecret) // Server-side only
})

Important:

Prefix public variables with NUXT_PUBLIC_
Never commit .env to version control
Create a .env.example file for documentation

Development Server

Start Development Server

# Start development server (default port 3000)
npm run dev

# Or with custom port
npm run dev -- --port 3001

# Or with custom host
npm run dev -- --host 0.0.0.0

Your app will automatically open in the browser at http://localhost:3000

Development Features

Hot Module Replacement: Instant feedback on edits
Auto Imports: No need to import components and composables
TypeScript: Built-in TypeScript support with type checking
DevTools: Vue DevTools integration
Error Overlay: Helpful error messages in browser

Available Scripts

Command	Description
`npm run dev`	Starts development server with HMR
`npm run build`	Build production application
`npm run generate`	Generate static site (pre-render all pages)
`npm run preview`	Preview production build locally
`npm run postinstall`	Generate Nuxt types
`npm run typecheck`	Run TypeScript type checking

Deployment

Build for Production

# Build for Node.js server
npm run build

# Or generate static site
npm run generate

# Preview production build
npm run preview

Deployment Platforms

Vercel

Zero-configuration deployment

# Install Vercel CLI
npm install -g vercel

# Deploy
vercel

Deploy to Vercel →

Netlify

Automatic Git deployments

# Install Netlify CLI
npm install -g netlify-cli

# Deploy
netlify deploy --prod

Deploy to Netlify →

Node.js Server

Deploy to any Node.js hosting

# Build and start
npm run build
node .output/server/index.mjs

Docker

Containerized deployment

# Build Docker image
docker build -t nuxt-app .

# Run container
docker run -p 3000:3000 nuxt-app

Static Generation: Use npm run generate to create a fully static site that can be hosted on any static hosting platform.

Rendering Modes

Mode	Command	Best For
Universal (SSR)	`npm run build`	Dynamic content, SEO, fast initial load
Static (SSG)	`npm run generate`	Static content, blogs, documentation
SPA	Set `ssr: false` in config	Client-side only apps

Installation Guide