Nuxt 3 Template

The Nuxt 3 template provides a full-stack Vue framework with SSR/SSG support, perfect for building modern web applications with server-side rendering capabilities.

Technical Stack

• Nuxt 3 - Full-stack Vue framework
• Vue 3 - Progressive JavaScript framework
• TypeScript - Type-safe development
• Vite - Fast build tool and dev server
• Vue Router - Built-in routing
• Pinia - State management library
• Vue i18n - Internationalization
• Tailwind CSS - Utility-first CSS framework
• SCSS - CSS preprocessor

Quick Start

1. Create Project

# Initialize project
vup init my-nuxt-project
cd my-nuxt-project

# Add Nuxt template
vup add my-nuxt-app

2. Install Dependencies

# Install dependencies
pnpm install

3. Start Development

# Start development server
cd apps/my-nuxt-app
pnpm dev

The application will be available at http://localhost:3000.

Project Structure

apps/my-nuxt-app/
├── src/
│   ├── assets/           # Static assets
│   │   └── images/       # Image files
│   ├── components/       # Vue components
│   │   └── Demo.vue      # Demo component
│   ├── composables/      # Vue composables
│   ├── layouts/          # Layout components
│   ├── middlewares/      # Route middlewares
│   ├── pages/            # File-based routing
│   │   ├── demo.vue      # Demo page
│   │   └── index.vue     # Home page
│   ├── utils/            # Utility functions
│   └── app.vue           # Root component
├── i18n/                 # Internationalization
│   └── locales/          # Translation files
│       ├── en-US.json    # English translations
│       └── zh-CN.json    # Chinese translations
├── public/               # Public assets
├── nuxt.config.ts        # Nuxt configuration
├── package.json          # Dependencies and scripts
├── tsconfig.json         # TypeScript configuration
└── tsconfig.build.json   # Build TypeScript configuration

Core Features

File-based Routing

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Home Page</h1>
    <NuxtLink to="/demo">Go to Demo</NuxtLink>
  </div>
</template>

<script setup lang="ts">
// Page metadata
useHead({
  title: 'Home Page',
  meta: [{ name: 'description', content: 'Welcome to Nuxt 3' }],
});
</script>

Server-side Rendering

<!-- pages/demo.vue -->
<template>
  <div>
    <h1>Demo Page</h1>
    <p>Server-side rendered content</p>
  </div>
</template>

<script setup lang="ts">
// Server-side data fetching
const { data } = await $fetch('/api/demo');

// SEO optimization
useHead({
  title: 'Demo Page',
  meta: [{ name: 'description', content: 'Demo page with SSR' }],
});
</script>

State Management with Pinia

// stores/counter.ts
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);

  const increment = () => {
    count.value++;
  };

  const decrement = () => {
    count.value--;
  };

  return {
    count,
    increment,
    decrement,
  };
});

Internationalization

// i18n/locales/en-US.json
{
  "common": {
    "title": "Nuxt 3 Application",
    "description": "A modern Nuxt 3 application"
  },
  "navigation": {
    "home": "Home",
    "demo": "Demo"
  }
}

Tailwind CSS Styling

<template>
  <div class="min-h-screen bg-gray-100">
    <header class="bg-white shadow-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl font-bold text-gray-900">
          {{ $t('common.title') }}
        </h1>
      </div>
    </header>

    <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
      <div class="px-4 py-6 sm:px-0">
        <div class="border-4 border-dashed border-gray-200 rounded-lg h-96">
          <p class="text-center text-gray-500 mt-20">
            {{ $t('common.description') }}
          </p>
        </div>
      </div>
    </main>
  </div>
</template>

Development Tools

Nuxt Configuration

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  modules: ['@nuxtjs/i18n', '@pinia/nuxt'],
  i18n: {
    locales: [
      { code: 'en', file: 'en-US.json' },
      { code: 'zh', file: 'zh-CN.json' },
    ],
    lazy: true,
    langDir: 'i18n/locales/',
    defaultLocale: 'en',
  },
  typescript: {
    strict: true,
    typeCheck: true,
  },
});

TypeScript Configuration

// tsconfig.json
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "./.output",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@shared/*": ["../../_shared/*"]
    }
  },
  "include": ["src/**/*", "src/**/*.vue", "src/*.vue", "./auto-imports.d.ts"]
}

Available Scripts

{
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "lint": "eslint src/ --ext .vue,.ts,.js",
    "lint:fix": "eslint src/ --ext .vue,.ts,.js --fix",
    "format": "prettier --write \"src/**/*.{js,ts,vue,json,css,scss}\"",
    "format:check": "prettier --check \"src/**/*.{js,ts,vue,json,css,scss}\""
  }
}

Best Practices

Component Structure

<template>
  <!-- Template content -->
</template>

<script setup lang="ts">
// Script content
</script>

<style scoped>
/* Scoped styles */
</style>

Server-side Data Fetching

<template>
  <div>
    <h1>{{ data.title }}</h1>
    <p>{{ data.description }}</p>
  </div>
</template>

<script setup lang="ts">
// Server-side data fetching
const { data } = await $fetch('/api/content');

// SEO optimization
useHead({
  title: data.title,
  meta: [{ name: 'description', content: data.description }],
});
</script>

State Management

// Use Pinia stores
const counterStore = useCounterStore();

// Access state
const count = computed(() => counterStore.count);

// Call actions
const increment = () => counterStore.increment();

Deployment

Build for Production

# Build the application
pnpm build

# Generate static site
pnpm generate

# The built files will be in the .output directory

Deploy to Vercel

See Vercel Deployment Guide for detailed deployment instructions.

Related Resources

• Nuxt 3 Official Documentation
• Vue 3 Documentation
• Vite Documentation
• Pinia Documentation
• Vue i18n Documentation
• Tailwind CSS Documentation