Vue 3 + Vuetify + TypeScript + Vite Starter

日本語版

Note

Because eslint does not support TypeScript 7, the current implementation temporarily allows for the coexistence of both 6 and 7.

This template helps you get started developing with Vue 3 and TypeScript in Vite. It uses Vue 3 <script setup vapor> SFCs; check out the script setup docs to learn more.

Includes vue-router and Pinia.

Additionally, ESLint, Stylelint, and Prettier are included and set to run automatically at runtime and on commit. (These settings are strict, so relax them as needed.)

When the development server runs, it is checked in real-time by vite-plugin-checker.

First, define VITE_APP_TITLE in your .env file.

AI Agent Guidance

This repository includes AGENTS.md, a guideline document for coding agents such as GitHub Copilot, Claude, and Cursor.

🚀 Quick Start

Installation

pnpm install

Start Development Server

pnpm dev

Open http://localhost:5173 in your browser.

Build

pnpm build

Test

pnpm test:unit
pnpm test:e2e

✨ Features

• Vue 3 + TypeScript + Vite combination
• Routing and state management with vue-router and Pinia
• Code quality management with ESLint, Stylelint, and Prettier
• Unit testing with Vitest
• E2E testing with Playwright
• Real-time type checking with vite-plugin-checker
• Strict linter settings to maintain high-quality code

🛠️ Recommended IDE Setup

VS Code + Vue (Official) (disable Vetur).

🌐 Recommended Browser Setup

• Chromium-based browsers (Chrome, Edge, Brave, etc.):
  • Vue.js devtools
  • Turn on Custom Object Formatter in Chrome DevTools
• Firefox:
  • Vue.js devtools
  • Turn on Custom Object Formatter in Firefox DevTools

📋 Commands

Designed to be close to create-vue commands.

Command	Description
dev	Start development server
lint	Run all linters
lint:oxlint	Run oxlint
lint:eslint	Run ESLint
lint:style	Run Stylelint
test	Run Vitest
test:unit	Run unit tests
test:coverage	Output coverage report
test:e2e	Run E2E tests
build	Build for production
build:analyze	Execute Bundle Analyzer
build:clean	Clear production build files
build-only	Build for production without checking (for deploy)
clean	Clear artifacts
clean:hard	Clear artifacts and development cache.
type-check	Check Vue markup
preview	Run the program generated by the production build

🔧 Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so they are shimmed to be a generic Vue component type. In most cases, this is fine if you don't care about component prop types outside of templates. However, if you wish to get actual prop types in .vue imports (for example, to get props validation when using manual h(...) calls), you can enable Volar's .vue type support plugin by running Volar: Switch TS Plugin on/off from the VSCode command palette.

📝 Checklist

When using this template, follow the checklist to update your info properly.

• Change the author name in LICENSE
• Change the favicon in public
• Remove the .github folder which contains funding info
• Review and adapt AGENTS.md for your project conventions
• Clean up the READMEs and remove routes

🔗 Related Projects

• vite-vue3-ts-starter
• vite-vuetify-ts-starter - With Vuetify 3
  • tauri-vuetify-starter - For cross-platform desktop application use.
• rsbuild-vue-starter - Built with Rsbuild stack instead of Vite