Starter Vue

A production-ready Vue monorepo starter built with Vite, pnpm workspaces, and Turborepo. Deployable applications and independently buildable libraries have explicit package boundaries, dependency-aware tasks, and cacheable outputs.

Technology Stack

• Vue 3 and Vue Router
• Vite 8
• TypeScript 6
• UnoCSS and Naive UI
• Axios
• Vitest
• tsdown for future library packages
• ESLint with @antfu/eslint-config
• pnpm workspaces and Turborepo
• nano-staged and simple-git-hooks

Requirements

• Node.js >=22.18.0
• Corepack
• pnpm 10.33.2

Enable Corepack and install the project-pinned pnpm version:

corepack enable
corepack prepare pnpm@10.33.2 --activate
pnpm install

Repository Structure

.
├── apps/                 # Deployable applications
│   └── admin/            # Vue administration application
├── packages/             # Independently buildable workspace libraries
│   └── utils/            # Pure utility functions published as @starter/utils
├── scripts/              # Repository-level development scripts
├── package.json          # Root commands and shared development tooling
├── pnpm-workspace.yaml   # Workspace definitions and dependency catalog
└── turbo.json            # Task orchestration and cache configuration

The apps/admin workspace contains the Vue administration application. packages/utils demonstrates the complete lifecycle of an independently publishable library: unit testing with Vitest, ESM and declaration generation with tsdown, and consumption from a Vue page through a workspace dependency.

Development

Run all commands from the repository root:

# Start the application development server
pnpm dev

# Run ESLint with zero warnings allowed
pnpm lint

# Apply safe ESLint fixes
pnpm lint:fix

# Run package and application tests
pnpm test

# Check TypeScript and Vue files
pnpm typecheck

# Create a production build
pnpm build

The development command prints a colored Figlet banner generated from the name field in apps/admin/package.json, then starts all workspace development tasks.

The Admin app starts Vite while @starter/utils runs tsdown --watch. Application code must import its public package entry:

import { sum } from '@starter/utils'

For production builds, Turborepo builds @starter/utils before building the App. The package exports map points to its generated dist files, so the Vue application consumes the same public entry used by external consumers.

Environment Variables

Default application variables are defined in apps/admin/.env. Create apps/admin/.env.local for local overrides:

cp apps/admin/.env apps/admin/.env.local

Keep .env.local out of version control and override only the values required by your local environment.

Commit Checks

Git hooks are installed automatically by simple-git-hooks during dependency installation. Before each commit, nano-staged runs ESLint with caching and automatic fixes against matching staged files in the application, packages, and repository scripts.

To bypass hooks for an exceptional local operation, set SKIP_SIMPLE_GIT_HOOKS=1 for that command. Do not use this in CI or routine development.