Vue 3 + Vuetify + TypeScript + Vite Starter

September 4, 2026 · View on GitHub

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

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