Vue 3 + Vuetify + TypeScript + Vite Starter

April 26, 2026 · View on GitHub

日本語版

GitHub stars GitHub license Node.js Version pnpm

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

Includes vue-router and Pinia 1.

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 AGENT.md, a guideline document for coding agents such as GitHub Copilot, Claude, and Cursor.

If you use an AI coding agent in this project, make sure it follows AGENT.md together with .github/copilot-instructions.md.

🚀 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

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

📋 Commands

Designed to be close to create-vue commands.

CommandDescription
devStart development server
cleanClear development server cache
type-checkCheck Vue markup
lintRun all linters
lint:oxlintRun oxlint
lint:eslintRun ESLint
lint:styleRun Stylelint
testRun Vitest
test:unitRun unit tests
test:coverageOutput coverage report
test:e2eRun E2E tests
buildBuild for production
build:analyzeExecute Bundle Analyzer
build:cleanClear production build files
build-onlyBuild for production without checking (for deploy)
previewRun 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.

🐛 Troubleshooting

When adding or deleting files, an error may occur, and even if corrected, it may not be reflected in the dev server. In that case, stop the dev server and delete all files in the node_modules/.vite directory. You can also run it with the clean command.

It will not work properly if you are using Node v21.0.0. Please upgrade to 21.1.0 or later.

📝 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 AGENT.md for your project conventions
  • Clean up the READMEs and remove routes

🎨 Crafted for Developers

This template is built with a focus on UI/UX excellence and modern developer experience. Maintaining it involves constant testing and updates to ensure everything works seamlessly.

If you appreciate the attention to detail in this project, a small sponsorship would go a long way in supporting my work across the Vue.js and Metaverse ecosystems.

GitHub Sponsors

Footnotes

  1. Pinia is the recommended state management library to replace Vuex in Vue. See https://github.com/vuejs/rfcs/discussions/270#discussioncomment-2066856. ↩