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).
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.
- mockjs.com
- Super/super123
- Admin/admin123
- User01/user01123
- Global application (support multi-language, fully responsive)
- Secure page, authorization view and action
- Beautiful UI (modern vibe, fancy transitions and animations)
- Optimized performace (quick page loading time, small package size, least re-render)
- Used latest technologies but still can integrate basic technologies
- vue3
- typescript (support developer with typesafe and hint when coding)
- vue-router
- pinia
- compress (reduce package size for quick deployment)
- unplug (support developer to use component without import)
- mock (support team to quick demo when backend is not ready yet)
- visualizer (visual package size, see what can be further size-optimized)
- unocss (inline css style like tailwind)
- naiveUI (component library for vuejs)
- Fully customize font
- Can use local icon, remote icon
- Except datepicker, pagination, dropdown all is self-implemented.
- Component with empty state, loading state, full content state
- Multi language (text, number format, datetime format, currency format)
- Dynamic route (auth route, view permission)
- JWT verify
- Transition + animation
- Third party library integration sample code