VueViteStarter

vue-ts-starter — Vue Starter Template

By yugasun

A front-end starter template based on Vue 3, TypeScript, Vite, and Pinia, integrating routing, UnoCSS, testing, and code-standard tools, with three branch options: Element Plus, Ant Design Vue, and no UI components.

Open Source SiteDownload Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

2 previews
Desktop homepage1 / 2
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 2

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-02View source

What stands out

A quick read of the recorded project description.

01

Base technology combination of Vue 3 + TypeScript + Vite + Pinia

02

UnoCSS atomic styling, with support for using icon sets by class name

03

Built-in Vue Router, Vue I18n, axios, and vueuse

04

Integrated Vitest unit testing and msw API mocking

05

Configured ESLint, Prettier, Airbnb style, Commitlint, and Commitizen

06

Provides three branches: Element Plus, Ant Design Vue, and no UI components

Template Details

This is a starter template for Vue 3 projects, maintained by yugasun and licensed under MIT. The technology stack is Vue 3 + TypeScript + Vite + Pinia, with UnoCSS for styling and Vue Router for routing.

Built-in development aids include: Vue DevTools, vite-plugin-pwa, Vitest unit testing, msw API mocking, the vueuse composition utility collection, the axios request library, and a class-based icon solution; internationalization is supported via Vue I18n. For engineering standards, ESLint, Prettier, the Airbnb style guide, Commitlint, and Commitizen are configured.

The UI component layer offers branch switching: the default branch uses Element Plus, the antd branch uses Ant Design Vue, and the simple branch includes no UI component library. The startup process is to clone the repository, then run pnpm install, pnpm dev, and pnpm build. The repository does not specify Node version requirements, directory structure details, or deployment configuration in the provided materials; before actual use, verify the dependency list and runtime environment yourself.

VueViteStarter

Is it right for your project?

Use Cases

  • Need to quickly set up a Vue 3 + TypeScript project skeleton
  • Want to use Pinia for state management with routing and internationalization pre-integrated
  • Need unit testing and API mocking capabilities early in the project
  • The team requires unified code style and commit message standards

Suitable For

  • Front-end developers using Vue 3 and TypeScript
  • Teams that need to choose a branch based on UI component library preference
  • Engineering teams that want a template with built-in linting, formatting, and commit standards

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    After cloning the repository, run pnpm install to install dependencies

  2. 2

    Use pnpm dev to start the development server and pnpm build to build

  3. 3

    Use the antd branch if Ant Design Vue is needed, and the simple branch if no UI component library is needed

  4. 4

    Recommended to use VS Code with the Volar extension for development

  5. 5

    Third-party assets and external services must be checked separately according to their respective licenses and billing rules

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in a public repository; the free scope is the code of this version and does not mean external services or third-party assets are free.

Must comply with when using

  • Free use, modification, commercial use, and distribution of this version's code are permitted.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text
https://github.com/yugasun/vue-ts-starter/blob/main/LICENSEhttps://github.com/yugasun/vue-ts-starter/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
More documented · 86 / 100
Technologies
Vue · Vite
Website type
Starter
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2024-11-28
Screenshot last checked
2026-10-02

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Vue as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: c8f81f26acba6ff44fbcd231cfd9b53e0652cc3fd77b19e0cfcd58b8e17cce0b

2026-10-02T18:16:40.034Z

Source file / repository
# Vue TypeScript Starter

[![Vue3](https://img.shields.io/badge/Framework-Vue3-42b883)](https://vuejs.org/)
[![TypeScript](https://img.shields.io/badge/Language-TypeScript-blue)](https://www.typescriptlang.org/)
[![Vite](https://img.shields.io/badge/Develop-Vite-747bff)](https://vitejs.dev)
[![Pinia](https://img.shields.io/badge/Store-Pinia-f7d336)](https://pinia.vuejs.org)
[![Unocss](https://img.shields.io/badge/CSS-Unocss-858585)](https://uno.antfu.me/)
[![Build](https://github.com/yugasun/vue-template/actions/workflows/deploy.yml/badge.svg?branch=main)](https://github.com/yugasun/vue-template/actions/workflows/deploy.yml)

Vue template for starter using Vue3 + TypeScript + Vite + Pinia + Unocss 🚀

## Feature

-   [x] [Vue3.0](https://vuejs.org/)
-   [x] [Vue Router](https://github.com/vuejs/router)
-   [x] [TypeScript](https://www.typescriptlang.org/)
-   [x] [Vite](https://vitejs.dev/) Next Generation Frontend Tooling
-   [x] [Vue DevTools](https://devtools-next.vuejs.org) Vue DevTools - Unleash Vue Developer Experience
-   [x] [vite-plugin-pwa](https://github.com/antfu/vite-plugin-pwa) Zero-config PWA for Vite
-   [x] [Pinia](https://pinia.vuejs.org/) The Vue Store that you will enjoy using
-   [x] ⚙️ [Vitest](https://github.com/vitest-dev/vitest) Unit Testing with Vitest
-   [x] 🎉 [Element Plus](https://github.com/element-plus/element-plus) A Vue.js 3 UI Library made by Element team
-   [x] 🌈 [Ant Design Vue](https://github.com/vueComponent/ant-design-vue) An enterprise-class UI components based on Ant Design and Vue. 🐜
-   [x] [vueuse](https://github.com/vueuse/vueuse) Collection of essential Vue Composition Utilities for Vue 2 and 3
-   [x] [axios](https://github.com/axios/axios) Promise based HTTP client for the browser and node.js
-   [x] 🎨 [UnoCSS](https://github.com/antfu/unocss) - the instant on-demand atomic CSS engine
-   [x] 😃 [Use icons from any icon sets with classes](https://github.com/antfu/unocss/tree/main/packages/preset-icons)
-   [x] 🌍 [I18n ready](https://vue-i18n.intlify.dev/) Vue I18n Internationalization plugin for Vue.js
-   [x] [msw](https://mswjs.io/docs/) Seamless REST/GraphQL API mocking library for browser and Node.js.
-   [x] [ESLint](https://eslint.org/)
-   [x] [Prettier](https://prettier.io/)
-   [x] [Airbnb Style Guide](https://github.com/airbnb/javascript)
-   [x] [Commitlint](https://github.com/conventional-changelog/commitlint) Lint commit messages
-   [x] [Commitizen](https://github.com/commitizen/cz-cli) The commitizen command line utility.

## Start

```bash
# 0. Clone project
git clone https://github.com/yugasun/vue-ts-starter

# 1. Install dependencies
pnpm install

# 2. Start develop server
pnpm dev

# 3. Build
pnpm build
```

## Customize

If you want to use Ant Design Vue, just checkout the branch `antd`.

```bash
git clone --branch antd https://github.com/yugasun/vue-ts-starter
```

If you don't need any UI components, just clone or checkout the branch `simple`.

```bash
git clone --branch simple https://github.com/yugasun/vue-ts-starter
```

## Recommended IDE Setup

-   [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

## License

[MIT @yugasun](./LICENSE)
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

vitesse

vitesse

Vitesse is an opinionated Vite + Vue 3 starter template maintained by antfu-collective, offering file-based routing, component and API auto-import, Pinia, UnoCSS, PWA, i18n, Markdown, vite-ssg, TypeScript, Vitest, and Cypress.

Vue · Starter

vitesse-webext

vitesse-webext

vitesse-webext is a Vite-powered WebExtension starter template using Vue 3 and TypeScript, with built-in popup, options, and content script examples. It targets Chrome and Firefox, integrates webextension-polyfill, webext-bridge, UnoCSS, VueUse, and unplugin tools, and supports hot reload during development.

Vue · Starter

laravel-vue-spa

laravel-vue-spa

A Laravel + Vue SPA starter kit for quickly building a decoupled web application skeleton. It includes login, registration, email verification, and password reset flows, uses JWT for authentication, and integrates Laravel Socialite with GitHub as an example provider.

Vue · Starter

vue3-h5-template

vue3-h5-template

A mobile H5 starter template built on Vue3, Vite, and Vant4, with TypeScript by default and JavaScript and i18n branches.

Vue · Starter

tov-template

tov-template

tov-template is an MIT-licensed Vite + Vue 3 + TypeScript starter maintained by dishait. It bundles file-based routing, layouts, Mock, auto-imports, UnoCSS, Pinia, vue-request, Vitest, i18n, dark mode, Dockerfile, and engineering scripts.

Vue · Starter

shadcn-vue-landing-page

shadcn-vue-landing-page

A Vue + Shadcn-Vue + TypeScript + Tailwind landing page template with sections like Navbar, Hero, Pricing, FAQ, Team, and Contact, plus dark mode and responsive layout.

Vue · Corporate Website