vite-ts-starter

August 25, 2025 · View on GitHub

English | 中文

🐬 A Starter template built on Vite 7.x + Vue 3.x + Element Plus 2.x + TypeScript + Husky + lint-staged.

A ready-to-use prototype template framework for quickly developing management systems using Vue3 + Vite7 + TS, with continuous updates on the latest tech stack 💪

🚀 Online Playground

🌱 Different Versions

Five different tech stack repo templates are maintained. Try them and pick the one that fits you.

💥 (Recommended) TS + Pinia + 🌐 Low-coupling (i18n) multilingual Vite7 + Vue3 + TS + Element-Plus2 + vue-i18n@next
⚡️ TS + Pinia Vite5 + Vue3 + TS + Pinia + Element-Plus2 + useLocale + i18n
⚡️ JS + Pinia Vite5 + Vue3 + Pinia + Element-Plus2 + useLocale + i18n
⚡️ TS + Vuex4 (Current Repo)Vite7 + Vue3 + TS + Vuex4 + Element-Plus2 + useLocale + i18n
⚡️ JS + Vuex4 Vite5 + Vue3 + Vuex4 + Element-Plus2 + useLocale + i18n

🪄 Using Different UI Libraries

If you prefer using Naive UI as your UI library, we've also prepared several corresponding template projects for you. You can use these as a foundation for secondary business development and customization:

🏄‍♂️ Naive UI basic template
🗂️ Naive UI Tab switching demo

🎉 Features

Supports Vite 7 + Vue 3 + TypeScript
UI framework: Element Plus 2.x
State management: Vuex 4
Code standardization: Husky + lint-staged
Unit testing framework: ~~Jest~~ upgraded to Vitest
Built-in ESlint and Stylelint, expandable for your desired Lint configuration
Built-in encapsulation of a potentially useful Axios, to be used with Vuex Actions when needed
Encapsulated <IconFont /> component for direct use of IconFont icons
Built-in global $ModalDialog plugin, supports dynamic service-style calls to display any component
Built-in i18n, supports language switching at VueRouter route level, allows writing internationalization config files and extending other languages
Pre-configured route authentication, along with Nprogress, just modify the permission.ts file
Comes with a modular component development environment, allowing decoupling of page components, route components, styles, etc. in the modules directory
Highly encapsulated yet flexible, with an abstracted complete business process for reference, involving three core pages: login, list, and details
Saves your configuration time, the project's lightweight nature allows you to focus solely on writing your business code

Environment Support

Vue 3.x
Node >= 22.12.x
Pnpm 9.x
VSCode Extension dbaeumer.vscode-eslint >= v3.0.5 (pre-release)

Screenshot

Install

Run pnpm i to install the dependencies.

pnpm i

Run

Run pnpm dev to start the frontend dev server.

pnpm dev

Test

Unit Testing.

pnpm test

Test code coverage.

pnpm test:coverage

🌍 Internationalization (i18n) Setup

This project supports multi-language settings, with English as the default language.

Default Language Configuration

The default language is set through the defaultLanguageLocale constant. To change the default language, simply modify the value of this constant:

export const defaultLanguageLocale = 'en'

Extending Supported Languages

The project currently supports the following languages, as detailed in src/locales/index.ts:

export const localesMapping = [
  {
    localeCode: 'zh-hans',
    localeName: '简体中文',
    localeLang: {...}
  },
  {
    localeCode: 'en',
    localeName: 'English',
    localeLang: {...}
  }
]

To add support for a new language:

Add a new language object to the localesMapping array
Create a corresponding language file in the src/locales/lang/ directory (e.g., de.ts for German)
```
./lang
├── en.ts
└── zh-hans.ts
```
Import and merge the Element Plus language pack and custom language file, ensuring both UI components and custom content are localized.

💡 Tip

If Husky is not working, it may be due to incomplete initialization. Try running the following command to initialize:

pnpm run prepare

😎 Awesome

awesome-vite