VueViteStarter

vue3-template — Vue Starter Template

By cherryful

A lightweight starter template based on Vue 3, Vite, and TypeScript, integrating Vue Router, Pinia, VueUse, UnoCSS, and UnoCSS UI, using PNPM for dependency management, and including GitHub Pages automatic deployment configuration.

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-03View source

What stands out

A quick read of the recorded project description.

01

Integrates Vue 3, Vite, TypeScript, Vue Router, Pinia, and VueUse

02

Uses UnoCSS and UnoCSS UI for styling

03

Adopts @antfu/eslint-config and @unocss/eslint-config, without relying on Prettier

04

Runs code checks before commits via simple-git-hooks and lint-staged

05

Includes a built-in GitHub Pages automatic build and deployment workflow

Template Details

This template targets developers who need to quickly set up a Vue 3 single-page application. Its tech stack centers on Vue 3 and Vite, paired with TypeScript, Vue Router, Pinia, VueUse, and PNPM. The styling layer uses UnoCSS and UnoCSS UI. Code standards adopt @antfu/eslint-config and @unocss/eslint-config, without introducing Prettier. Data requests use the Fetch API, and simple-git-hooks and lint-staged are configured to run checks before commits.

The repository includes a GitHub Pages automatic deployment workflow: pushing to the main branch builds to gh-page. If used for a project page, you need to set VITE_BASE_PUBLIC_PATH in the repository's Settings > Secrets and variables > Actions, with the value /repository-name/.

The template is released under the MIT license, allowing free use, modification, commercial use, and distribution, but the copyright notice and license notice must be retained when distributing. Third-party assets such as demo images, fonts, and icons need separate license verification; external services like domains and hosting may incur costs.

VueViteStarter

Is it right for your project?

Use Cases

  • Quickly starting a Vue 3 single-page application project
  • Frontend engineering requiring TypeScript and the Composition API
  • Projects wanting to use the UnoCSS atomic styling approach
  • Repositories needing to deploy a static site to GitHub Pages

Suitable For

  • Frontend developers familiar with Vue 3 and Vite
  • Teams preferring TypeScript and PNPM
  • Projects wanting to freely use and modify code under the MIT license
  • Developers needing a lightweight starter template rather than a full business framework

Getting started & customization

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

  1. 1

    Use PNPM to install dependencies and run development or build commands

  2. 2

    When deploying a project page to GitHub Pages, set VITE_BASE_PUBLIC_PATH to /repository-name/ in the repository's Actions variables

  3. 3

    Pushing to the main branch triggers the default workflow to build to gh-page

  4. 4

    Retain the MIT license and copyright notice when distributing the code

  5. 5

    Third-party assets such as demo images, fonts, and icons need separate license verification

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 the 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

  • Allows free use, modification, commercial use, and distribution of this version's code.
  • 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

  • When deploying to a GitHub Pages project page, you must set VITE_BASE_PUBLIC_PATH to /repository-name/ in the repository's Actions variables, otherwise asset paths will be incorrect.
  • The default workflow only triggers a build and outputs to the gh-page directory when pushing to the main branch; other branches will not deploy automatically.
  • Demo images, fonts, icons, and other third-party assets need to be checked against 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

For a project page, the base path of the repository must be specified.

Original README

The default github action will build to `gh-page` when pushing on `main` branch.

Original README
https://github.com/cherryful/vue3-template/blob/main/LICENSEhttps://github.com/cherryful/vue3-template/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-03. 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 · 77 / 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
2023-10-31
Screenshot last checked
2026-10-03

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.

Review declaration: [email protected] · 2026-10-04

Inspect the recorded source material

SHA-256: a7df4f6b3f9d162b8568dbb486a096d57a33617aa9da5d4ad4e17c764dfb72f6

2026-10-03T22:33:33.670Z

Source file / repository
# vue3-starter

It doesn't need to be too complicated, simple is great.

Features:

- 🛠 [Vue 3](https://v3.vuejs.org/guide/introduction.html) + [Vite](https://vitejs.dev/guide/) + [Vue Router](https://github.com/vuejs/vue-router-next) + [Pinia](https://pinia.vuejs.org/) + [VueUse](https://vueuse.org/) + [PNPM](https://pnpm.io)
- 🎨 [UnoCSS](https://github.com/antfu/unocss) + ⭐ [UnoCSS UI](https://github.com/cherryful/unocss-ui) 
- 🧹 [@antfu/eslint-config](https://github.com/antfu/eslint-config) + [@unocss/eslint-config](https://github.com/unocss/unocss/tree/main/packages/config), no Prettier
- 🦾 TypeScript + Fetch API
- 📄 [Github pages action](https://pages.github.com)
- 🫡 [simple-git-hooks](https://www.npmjs.com/package/simple-git-hooks) + [lint-staged](https://www.npmjs.com/package/lint-staged)

## Github pages

The default github action will build to `gh-page` when pushing on `main` branch.

For a project page, the base path of the repository must be specified. Add the following variable in the Github repository Settings > Secrets and variables > Actions

| Name                        | Value                    |
| --------------------------- | ------------------------ |
| VITE_BASE_PUBLIC_PATH       | `/repository-name/`      |
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