Vue 3 + Vite Starter

Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue 3 + Vite Starter</title>
<style>
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: #0a0a0f;
    color: #e2e8f0;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
  }

  .card {
    max-width: 640px;
    width: 100%;
    background: linear-gradient(135deg, rgba(34,211,238,0.04), rgba(59,130,246,0.04));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #22d3ee, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    flex-shrink: 0;
  }

  .header h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f1f5f9;
  }

  .header p {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 2px;
  }

  h2 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #22d3ee;
    margin-bottom: 0.5rem;
  }

  .cli-block {
    background: #111118;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.82rem;
    line-height: 1.7;
    color: #cbd5e1;
    overflow-x: auto;
  }

  .cli-block .prompt { color: #22d3ee; }
  .cli-block .flag { color: #a78bfa; }
  .cli-block .comment { color: #475569; }

  .tree {
    background: #111118;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.78rem;
    line-height: 1.65;
    color: #94a3b8;
  }

  .tree .dir { color: #3b82f6; }
  .tree .file { color: #cbd5e1; }
  .tree .config { color: #a78bfa; }

  .key-files {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .key-file {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    font-size: 0.82rem;
  }

  .key-file code {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.78rem;
    background: rgba(59,130,246,0.12);
    color: #60a5fa;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .key-file span {
    color: #94a3b8;
  }

  .extend-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .extend-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
  }

  .extend-item strong {
    font-size: 0.8rem;
    color: #f1f5f9;
    display: block;
    margin-bottom: 2px;
  }

  .extend-item span {
    font-size: 0.72rem;
    color: #64748b;
  }

  .links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 0.25rem;
    border-top: 1px solid rgba(255,255,255,0.06);
  }

  .links a {
    font-size: 0.78rem;
    color: #22d3ee;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: color 0.2s;
  }

  .links a:hover { color: #67e8f9; }
  .links a::before { content: '->'; font-family: monospace; font-size: 0.7rem; }
</style>
</head>
<body>
  <div class="card">
    <div class="header">
      <div class="icon">V</div>
      <div>
        <h1>Vue 3 + Vite</h1>
        <p>Composition API, Vue Router, Pinia &amp; TypeScript</p>
      </div>
    </div>

    <section>
      <h2>Quick Start</h2>
      <div class="cli-block">
        <span class="prompt">$</span> npm create vue@latest my-app<br/>
        <span class="comment"># Interactive prompts: TS, Router, Pinia, Vitest, ESLint...</span><br/>
        <span class="prompt">$</span> cd my-app<br/>
        <span class="prompt">$</span> npm install<br/>
        <span class="prompt">$</span> npm run dev <span class="comment"># http://localhost:5173</span>
      </div>
    </section>

    <section>
      <h2>Project Structure</h2>
      <div class="tree">
        <span class="dir">my-app/</span><br/>
        ├── <span class="dir">public/</span><br/>
        │   └── <span class="file">favicon.ico</span><br/>
        ├── <span class="dir">src/</span><br/>
        │   ├── <span class="dir">assets/</span><br/>
        │   │   └── <span class="file">main.css</span><br/>
        │   ├── <span class="dir">components/</span><br/>
        │   │   └── <span class="file">HelloWorld.vue</span><br/>
        │   ├── <span class="dir">router/</span><br/>
        │   │   └── <span class="config">index.ts</span><br/>
        │   ├── <span class="dir">stores/</span><br/>
        │   │   └── <span class="config">counter.ts</span><br/>
        │   ├── <span class="dir">views/</span><br/>
        │   │   ├── <span class="file">HomeView.vue</span><br/>
        │   │   └── <span class="file">AboutView.vue</span><br/>
        │   ├── <span class="file">App.vue</span><br/>
        │   └── <span class="file">main.ts</span><br/>
        ├── <span class="config">vite.config.ts</span><br/>
        ├── <span class="config">tsconfig.json</span><br/>
        ├── <span class="file">env.d.ts</span><br/>
        └── <span class="file">package.json</span>
      </div>
    </section>

    <section>
      <h2>Key Files</h2>
      <div class="key-files">
        <div class="key-file">
          <code>vite.config.ts</code>
          <span>Vue plugin, path aliases (@/ to src/), dev server</span>
        </div>
        <div class="key-file">
          <code>router/index.ts</code>
          <span>Route definitions with createRouter &amp; createWebHistory</span>
        </div>
        <div class="key-file">
          <code>stores/counter.ts</code>
          <span>Pinia store with defineStore, Composition API style</span>
        </div>
        <div class="key-file">
          <code>App.vue</code>
          <span>Root component with &lt;RouterView /&gt; for pages</span>
        </div>
      </div>
    </section>

    <section>
      <h2>Extend With</h2>
      <div class="extend-grid">
        <div class="extend-item">
          <strong>UnoCSS</strong>
          <span>Atomic CSS engine</span>
        </div>
        <div class="extend-item">
          <strong>Vue I18n</strong>
          <span>Internationalization</span>
        </div>
        <div class="extend-item">
          <strong>VueUse</strong>
          <span>200+ composable utilities</span>
        </div>
        <div class="extend-item">
          <strong>Nuxt</strong>
          <span>Full-stack framework with SSR</span>
        </div>
      </div>
    </section>

    <div class="links">
      <a href="https://vuejs.org/guide/quick-start">Vue Quick Start</a>
      <a href="https://vite.dev/guide/">Vite Docs</a>
      <a href="https://github.com/antfu-collective/vitesse">Vitesse (9.4k+)</a>
    </div>
  </div>
</body>
</html>

The official create-vue scaffolding tool builds a Vue 3 project powered by Vite with an interactive CLI that lets you pick exactly the features you need: TypeScript, Vue Router, Pinia, Vitest, ESLint, and Prettier.

Quick Start

npm create vue@latest my-app
cd my-app
npm install
npm run dev

The interactive prompts let you toggle TypeScript, JSX, Vue Router, Pinia, Vitest, E2E testing (Cypress/Playwright), ESLint, and Prettier.

What You Get

Vue 3 Composition API — <script setup> with reactive refs, computed properties, and composables
Vite — Instant dev server, native ESM, optimized production builds
TypeScript — Full type inference for props, emits, slots, and the template
Vue Router — File-based mental model with nested routes, guards, and lazy loading
Pinia — Lightweight, type-safe state management replacing Vuex
Vitest — Vite-native testing (optional)
ESLint + Prettier — Code quality and formatting (optional)

Generated Project Structure

my-app/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   │   └── main.css
│   ├── components/
│   │   ├── HelloWorld.vue
│   │   └── icons/
│   ├── router/
│   │   └── index.ts
│   ├── stores/
│   │   └── counter.ts
│   ├── views/
│   │   ├── AboutView.vue
│   │   └── HomeView.vue
│   ├── App.vue
│   └── main.ts
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── env.d.ts

Key Files

vite.config.ts — Vue plugin, path aliases (@/ maps to src/), dev server options.
src/router/index.ts — Route definitions with createRouter and createWebHistory.
src/stores/counter.ts — Example Pinia store using defineStore with Composition API syntax.
src/App.vue — Root component with <RouterView /> for page rendering.

Extend With

Tool	Purpose
UnoCSS	Instant atomic CSS engine, Tailwind-compatible
Vue I18n	Internationalization with message compilation
VueUse	200+ composable utility functions
Nuxt	Full-stack framework with SSR, auto-imports, and file-based routing
PrimeVue	Rich UI component library

References

Vue Quick Start — Official guide to scaffolding and developing Vue applications
antfu-collective/vitesse (9.4k+ stars) — Opinionated community starter with UnoCSS, auto-imports, file-based routing, and PWA support