vite-vuetify-ts-starter

vite-vuetify-ts-starter is a GitHub template that gives you a runnable Vue 3, Vuetify 3, TypeScript application scaffolded on Vite, complete with router, store, linting, and test tooling.

What is vite-vuetify-ts-starter?

vite-vuetify-ts-starter is an open-source GitHub template that combines Vue 3, Vuetify 3, TypeScript, and Vite into a pre-configured single-page application scaffold. It consumes your environment variables (like VITE_APP_TITLE) and source files, and produces a production-ready build via pnpm build or a dev server on http://localhost:5173 via pnpm dev. The template is maintained by GitHub user l ogue, who also publishes related starters for Vue 2 and other UI libraries.

What makes vite-vuetify-ts-starter stand out?

• Complete Vue 3 + Vuetify 3 stack — Vite serves as the build tool, Vuetify 3 provides Material Design components, and TypeScript adds static typing to components.
• Router and state management — vue-router and Pinia are included and wired up for sample routes.
• Strict code quality pipeline — ESLint, Stylelint, and Prettier run automatically on commit, with settings the author describes as strict.
• Real-time type checking — vite-plugin-checker performs live type validation while the dev server runs.
• Unit and E2E testing — Vitest handles unit tests and Playwright handles end-to-end tests, each with its own pnpm command.
• AI agent support — AGENT.md and .github/copilot-instructions.md provide guidance for AI coding tools, plus optional Agent Skills for Vue and Vuetify.
• Rich command set — Includes bundle analysis via build:analyze, coverage reporting via test:coverage, and clean commands for cache and build artifacts.

Who should use vite-vuetify-ts-starter?

• Vue 3 developers — Start a new Vuetify project with a known working toolchain and sample routes to replace.
• Development teams — Enforce consistent code style and catch type errors early using the preset linters and vite-plugin-checker during dev.
• AI-assisted programmers — Use the AGENT.md and Copilot instructions to keep AI-generated code aligned with project conventions.
• CI/CD engineers — Run pnpm test:unit, pnpm test:e2e, and pnpm build in pipelines, with coverage and bundle analysis commands included.

What can you do with vite-vuetify-ts-starter?

• Vue developers: scaffold a new Vuetify 3 app and see it running at http://localhost:5173 within seconds of running pnpm install and pnpm dev.
• Teams: run pnpm lint to check Vue markup, styles, and JavaScript in one command, then use pnpm test for unit tests.
• Open-source maintainers: use pnpm build:analyze to inspect bundle size and pnpm test:coverage to report unit test coverage.
• AI tooling tinkerers: install the optional Vue best-practices and Vuetify skills with npx skills add, and manage them via the tracked skills-lock.json file.

How does vite-vuetify-ts-starter work?

It follows the standard Vite workflow. After cloning, run pnpm install to install dependencies, then pnpm dev to start the dev server. The README also lists a clean command to remove cached files in node_modules/.vite if adding or deleting files misbehaves.

Pros and cons

• Pros:
  • Strict linting and type checking are set up out of the box.
  • Both unit and E2E testing are pre-configured.
  • Includes guidance and optional skills for AI coding agents.
  • Offers a bundle analyzer and coverage commands.
• Cons:
  • Requires Node v22.13.0 or higher, and Node v21.0.0 is explicitly noted as incompatible.
  • The strict linter settings may need to be relaxed for your preferences, as the author acknowledges.
  • Uses pnpm as the package manager; if you prefer npm or Yarn, you may need to translate commands.

Alternatives

• create-vue — the official Vue scaffolding CLI, which can generate projects with similar options like router and Pinia.
• vite-vue3-ts-starter — a related starter from the same author without the Vuetify dependency.
• vite-element-plus-ts-starter — another related starter from the same author that uses Element Plus instead of Vuetify.

FAQ

Does vite-vuetify-ts-starter work with Node 21?

The README warns that Node v21.0.0 does not work properly and requires an upgrade to at least 21.1.0. The badge in the repository specifies Node v22.13.0 or higher as the supported version, so stick to that for a reliable setup.

What package manager should I use?

The template is built around pnpm, version 11 per the badge. The quick start instructions all use pnpm commands such as pnpm install, pnpm dev, and pnpm build.

Does the template include tests?

Yes. Vitest is configured for unit tests and Playwright for end-to-end tests. Run them with pnpm test:unit and pnpm test:e2e respectively.

How do I change the application title?

Define the VITE_APP_TITLE environment variable in your .env file. The README gives this as the first step before starting development.

Is there support for AI coding agents?

The repository includes AGENT.md and .github/copilot-instructions.md as guidance documentation, and optionally supports installing Vue and Vuetify Agent Skills via npx skills add for tools like Claude Code and GitHub Copilot.