Refer to the README of template-vue-ts and vitesse
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup>
SFCs, check out the script setup docs to learn more.
- VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar) + EditorConfig+ ESLint + UnoCSS
TypeScript cannot handle type information for .vue
imports by default, so we replace the tsc
CLI with vue-tsc
for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue
types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:
- Disable the built-in TypeScript Extension
- Run
Extensions: Show Built-in Extensions
from VSCode's command palette - Find
TypeScript and JavaScript Language Features
, right click and selectDisable (Workspace)
- Run
- Reload the VSCode window by running
Developer: Reload Window
from the command palette.
- Vue 3, Vite 3, pnpm, esbuild
- File based routing
- Components auto importing
- UnoCSS
- Use icons from any icon sets in Pure CSS
- Use
<script setup>
style - Use TypeScript
- UnoCSS - the instant on-demand atomic CSS engine
Icons 🔍
- Iconify - use icons from any icon sets
- Pure CSS Icons via UnoCSS
- Vue Router
- vite-plugin-pages - file system based routing
- unplugin-auto-import - directly use Vue Composition API and others without importing
- unplugin-vue-components - components auto import
- VueUse - collection of essential Vue Composition Utilities
- @vueuse/head - document head manager for Vue 3
If you prefer to do it manually with the cleaner git history
npx degit byyuurin/starter-vue my-vue-app
cd my-vue-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm