Vue 3 Starter Template

A professional-grade, opinionated starter template for scalable Vue 3 applications.

Designed for developer experience, code quality, and long-term maintainability. This template pre-configures the best-in-class tools so you can focus on building features, not configuring build tools.

---

✨ Features

⚡️ Core Stack

• Vue 3.5+: Utilizing the Composition API with <script setup> for concise and performant components.
• TypeScript 5.9+: configured with strict: true and noUncheckedIndexedAccess for maximum type safety.
• Vite 7: Next-generation frontend tooling with instant server start and lightning-fast HMR.
• Tailwind CSS 4.1: The latest utility-first CSS framework, integrated via the new Vite plugin for optimal performance.

🛠 Developer Experience

• ESLint: Powered by @antfu/eslint-config for a zero-config, opinionated linting and formatting experience.
• Husky & lint-staged: Ensures all committed code meets quality standards.
• Commitlint: Enforces Conventional Commits for clean and semantic git history.
• VueUse: A collection of essential Vue Composition Utilities.

🧩 Architecture

• Pinia: The intuitive, type-safe store for Vue.
• Vue Router: Standard routing with history mode and lazy-loading support.
• File-Based Routing: Structured views directory for clear page organization.
• Path Aliases: @/ configured to resolve to ./src/.

🧪 Testing & Quality

• Vitest: Blazing fast unit testing framework, API-compatible with Jest.
• GitHub Actions: Automated CI pipeline for linting, type-checking, and testing.
• audit-ci: Prevents deployment of dependencies with known high-severity vulnerabilities.

---

💻 IDE Setup

For the best experience, we recommend VS Code with the following configuration:

1. Install Extensions:

   • Vue - Official (formerly Volar)
   • Tailwind CSS IntelliSense
   • ESLint

2. Workspace Settings: This project includes .vscode/extensions.json and .vscode/settings.json to automatically configure your editor for:

   • Auto-fixing lint errors on save.
   • Correct TypeScript integration with Vue.

Note: If you have the legacy Vetur extension installed, please disable it for this workspace to avoid conflicts.

---

📋 Prerequisites

Ensure your environment meets the following requirements:

Requirement	Version	Note
Node.js	22+ (LTS)	Required for modern build tools.
pnpm	10.17+	Enforced via package.json.

---

🚀 Getting Started

1. Clone the repository

git clone https://github.com/pharmacist-sabot/vue-starter.git my-app
cd my-app

2. Install dependencies

pnpm install

3. Start development server

pnpm dev

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

---

📜 Available Scripts

Category	Script	Description
Development	pnpm dev	Start the development server with HMR.
	pnpm preview	Preview the production build locally.
Build	pnpm build	Run type-checks and build for production.
Quality	pnpm lint	Lint and format all files.
	pnpm lint:fix	Auto-fix linting and formatting issues.
	pnpm type-check	Run the TypeScript compiler (no emit).
	pnpm audit	Check for high-severity vulnerabilities.
Testing	pnpm test:unit	Run unit tests in watch mode.
	pnpm test:coverage	Run tests and generate coverage reports.
Lifecycle	pnpm prepare	Install Husky git hooks.

---

📁 Project Structure

.
├── .github/             # CI/CD workflows (GitHub Actions)
├── .husky/              # Git hooks configuration
├── .vscode/             # VS Code workspace settings
├── src/
│   ├── assets/          # Static assets (images, fonts, global CSS)
│   ├── components/      # Reusable UI components
│   │   └── common/      # Generic components (Buttons, Inputs, etc.)
│   ├── composables/     # Shared logic (Vue Composables)
│   ├── layouts/         # Layout components (e.g., Sidebar, Header)
│   ├── router/          # Routing configuration
│   ├── stores/          # Global state management (Pinia)
│   ├── types/           # TypeScript type definitions
│   ├── utils/           # Helper functions and utilities
│   ├── views/           # Page-level components
│   ├── App.vue          # Root component
│   └── main.ts          # Application entry point
├── tests/               # Unit tests (mirrors src structure)
├── eslint.config.mjs    # ESLint configuration
├── tailwind.config.js   # Tailwind CSS configuration
├── tsconfig.json        # TypeScript configuration
└── vite.config.ts       # Vite configuration

---

🔧 Configuration Details

TypeScript

We use a strict TypeScript configuration to catch errors early.

• strict: true: Enables all strict type checking options.
• noUncheckedIndexedAccess: true: Prevents accessing array/object indices without checking for undefined.

ESLint

We utilize @antfu/eslint-config, which provides a curated set of rules for Vue, TypeScript, and general code style.

• No Prettier: Formatting is handled directly by ESLint.
• Auto-Import Sorting: Imports are automatically sorted and grouped.
• Single Quotes & Semicolons: Configured for consistency.

---

🚢 Deployment

Static Hosting (Vercel, Netlify, etc.)

This project builds a static SPA.

1. Build Command: pnpm build
2. Output Directory: dist
3. Node Version: 22.x

---

🤝 Contributing

1. Fork the repository.
2. Create a feature branch: git checkout -b feat/my-feature.
3. Commit your changes following Conventional Commits: git commit -m "feat: add amazing feature".
4. Push to the branch: git push origin feat/my-feature.
5. Open a Pull Request.

---

📄 License

This project is licensed under the MIT License.