This template helps you get started developing with Vue 3, TypeScript, and Vuetify 3 in Vite. It uses Vue 3 <script setup> SFCs; check out the script setup docs to learn more.
Includes vue-router, Pinia 1, and Vuetify 3.
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.
pnpm installpnpm devOpen http://localhost:5173 in your browser.
pnpm buildpnpm test:unit
pnpm test:e2e- Vue 3 + TypeScript + Vite combination
- Vuetify 3 for Material Design UI components
- 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).
- Chromium-based browsers (Chrome, Edge, Brave, etc.):
- Firefox:
Designed to be close to create-vue commands.
| Command | Description |
|---|---|
dev |
Start development server |
clean |
Clear development server cache |
type-check |
Check Vue markup |
lint |
Run all linters |
lint:oxlint |
Run oxlint |
lint:eslint |
Run ESLint |
lint:style |
Run Stylelint |
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) |
preview |
Run the program generated by the production build |
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.
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.
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
.githubfolder which contains funding info - Clean up the READMEs and remove routes
- For Vue 3:
- vite-vue3-ts-starter - Base template without UI framework
- tauri-vuetify-starter - For cross-platform desktop application use.
- vite-element-plus-ts-starter - With Element Plus
- rsbuild-vue3-ts-starter
- vite-bootstrap-vue-ts-starter - Coming soon
- vite-vue3-ts-starter - Base template without UI framework
- For Vue 2 (DEPRECATED):
- vite-vue2-ts-starter - Vite Vue2 starter
- vite-vue2-vuetify-ts-starter - UI library using Vuetify2
- laravel9-vite-vue2-starter - Vue2 for Laravel9 + Breeze
- vite-vue2-ts-ssr-starter - SSR (Server Side Rendering) version
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.
Footnotes
-
Pinia is the recommended state management library to replace Vuex in Vue. See https://github.com/vuejs/rfcs/discussions/270#discussioncomment-2066856. ↩