VUP

English

简体中文

English

简体中文

Appearance

Nuxt 4 Template ​

The Nuxt 4 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 4 - 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
  • @nuxtjs/i18n - Nuxt i18n integration
  • Tailwind CSS - Utility-first CSS framework
  • SCSS - CSS preprocessor

Quick Start ​

1. Create Project ​

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

# Add Nuxt template
vup add my-nuxt-app

2. Install Dependencies ​

bash
# Install dependencies
pnpm install

3. Start Development ​

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

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

Project Structure ​

apps/my-nuxt-app/
├── src/
│   ├── api/                        # API layer
│   │   ├── request.ts
│   │   ├── types.ts
│   │   └── demo.ts
│   ├── assets/                     # Static assets
│   │   └── images/
│   │       └── nuxt.svg
│   ├── components/
│   │   └── demo/
│   │       └── DemoTaskBoard.vue
│   ├── pages/                      # File-based routing
│   │   ├── index.vue
│   │   ├── demo.vue
│   │   └── demo/
│   │       ├── guide.vue
│   │       └── example.vue
│   ├── plugins/
│   │   └── msw.client.ts
│   ├── stores/
│   │   └── demo/
│   │       └── index.ts
│   └── app.vue
├── i18n/
│   └── locales/
│       ├── en-US.json
│       └── zh-CN.json
├── public/
│   ├── favicon.ico
│   ├── robots.txt
│   └── mockServiceWorker.js
├── .env.example
├── nuxt.config.ts
├── package.json
├── tsconfig.json
└── tsconfig.build.json

Core Features ​

File-based Routing ​

vue
<!-- 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 4' }],
});
</script>

Server-side Rendering ​

vue
<!-- 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/template-demo/tasks');

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

State Management with Pinia ​

typescript
// src/stores/demo/index.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 ​

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

Tailwind CSS Styling ​

vue
<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 ​

typescript
// nuxt.config.ts
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  srcDir: 'src/',
  devServer: {
    port: 9303,
  },
  typescript: {
    strict: true,
    typeCheck: false,
  },
  css: ['@_shared/assets/styles/tailwind.scss'],
  modules: ['@nuxtjs/i18n', '@pinia/nuxt', '@element-plus/nuxt'],
  imports: {
    dirs: ['types/**'],
  },
  runtimeConfig: {
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '',
      useMock: process.env.NUXT_PUBLIC_USE_MOCK !== 'false',
    },
  },
  i18n: {
    defaultLocale: 'en-US',
    locales: [
      { code: 'zh-CN', name: '中文', file: 'zh-CN.json' },
      { code: 'en-US', name: 'English', file: 'en-US.json' },
    ],
    langDir: 'locales/',
    strategy: 'prefix_except_default',
  },
  vite: {
    resolve: {
      alias: {
        '@_shared': '../../../_shared',
      },
    },
  },
});

TypeScript Configuration ​

json
// tsconfig.json
{
  "files": [],
  "references": [
    {
      "path": "./.nuxt/tsconfig.app.json"
    },
    {
      "path": "./.nuxt/tsconfig.server.json"
    },
    {
      "path": "./.nuxt/tsconfig.shared.json"
    },
    {
      "path": "./.nuxt/tsconfig.node.json"
    }
  ],
  "exclude": [".nuxt"]
}

Available Scripts ​

json
{
  "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}\""
  }
}

Deployment ​

Build for Production ​

bash
cd apps/my-nuxt-app

# 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.

Copyright © 2025 VUP-CLI