VueViteStarter

vite-ts-tailwind-starter — Vue Starter Template

By Uninen

A starter template based on Vite, Vue 3, TypeScript, and Tailwind CSS, with Pinia, vue-router, auto-imports, icons, linting, Vitest/Playwright tests, and GitHub Actions CI built in.

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

What stands out

A quick read of the recorded project description.

01

Complete frontend structure with Vue 3 + Pinia + vue-router

02

Tailwind CSS with typography plugin and Iconify icon classes

03

Auto-imports via unplugin-auto-import

04

TypeScript, ESLint, Oxlint, Prettier, EditorConfig, and VSCode configuration included

05

Vitest component tests and Playwright end-to-end tests, with GitHub Actions CI and coverage reports

06

Build-time injection of app version and build time into store.appMeta

Template Details

This template is maintained by Uninen under the MIT license and targets projects that want to start with Vite + Vue 3 + TypeScript + Tailwind CSS. It brings common engineering configuration together: Vue 3 with Pinia state management and vue-router routing, auto-imports via unplugin-auto-import, and Tailwind CSS with the official typography plugin enabled and support for calling Iconify icons as classes.

The toolchain includes TypeScript, ESLint, Oxlint, Prettier, EditorConfig, and recommended VSCode settings; testing uses Vitest for component tests and Playwright for end-to-end tests, with GitHub Actions running CI/CD and providing code coverage reports in PRs. The project root uses @ as an alias, the router instance is directly accessible in stores, and during build the package.json version is written to VITE_APP_VERSION and the build timestamp to VITE_APP_BUILD_EPOCH and stored in store.appMeta.

The template includes example components and documentation. To reset it, delete the HelloWorld component and its tests, clear the contents of IndexPage.vue, and remove the demo styles from base.css. It provides an engineering starting point and does not include a backend, database, or deployment solution; third-party assets such as demo images, fonts, and icons must be checked separately under their respective licenses.

VueViteStarter

Is it right for your project?

Use Cases

  • Quickly prototyping a Vue 3 + TypeScript single-page application
  • Starting a frontend project that needs ready-made testing and CI configuration
  • Teams wanting unified linting, formatting, and editor configuration
  • UI development using Tailwind CSS with icon and typography plugins

Suitable For

  • Frontend developers familiar with Vue 3 and TypeScript
  • Individual or small-team projects needing out-of-the-box engineering configuration
  • Users who want to start real development by replacing example content with minimal changes

Getting started & customization

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

  1. 1

    The template includes example content; resetting requires deleting src/components/HelloWorld.vue and its tests, clearing @/pages/IndexPage.vue, and removing demo styles from @/assets/base.css

  2. 2

    The code is under the MIT license; copyright and license notices must be retained when distributing

  3. 3

    Third-party assets such as demo images, fonts, and icons must be checked separately under their respective licenses

  4. 4

    External services such as domains, hosting, and databases may incur additional costs

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version in the public repository under the MIT license; the free scope is that version's code 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 separate charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text
https://github.com/Uninen/vite-ts-tailwind-starter/blob/main/LICENSEhttps://github.com/Uninen/vite-ts-tailwind-starter/blob/main/README.md

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

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: df01b3d1cd7a0b582fa6e297c35ff1c6a3fa18716dd3ddd9fe617c1a148713a8

2026-10-04T03:49:09.853Z

Source file / repository
# Vite + Vue 3 + Typescript + Tailwind Starter

Oopinionated, **fully typed**, and **production-ready** project template for Vite.

The goal of this template is to be **practical** and **batteries included** starting point for both quick experiments and projects designed for production quality.

Includes plenty of **examples and documentation** of how to do things but **minimal cruft** to delete to get you going.

Please [check out the homepage](https://vite-ts-tailwind-starter.vercel.app/) for full docs. A [detailed changelog](./CHANGES.md) is available.

## Features

- **Vue 3** with [Pinia](https://pinia.vuejs.org/) store and [vue-router](https://router.vuejs.org/) routing
- **Automatic imports** via [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import)
- **Tailwind CSS** with the official `typography` plugin, plus **automatic icons** using [Iconify for Tailwind CSS](https://iconify.design/docs/usage/css/tailwind/tailwind4/)
- **Comprehensive tooling** configs for TypeScript, Eslint, Oxlint, Prettier, EditorConfig and recommended settings and configs for VSCode
- **Full testing setup** using Vitest (components) and Playwright (e2e) together with Github Actions for CI/CD including [code coverage reporting](https://github.com/Uninen/vite-ts-tailwind-starter/pull/279#issuecomment-2435516534) in PRs.

### Code Features / Opinions

- Project root aliased as `@` (`import { myUtilsThing } from @/utils/mylib`)
- Router instance available in the store: `this.router.push('/')`
- Any of 100000+ [Iconify icons](https://icon-sets.iconify.design/) available as Tailwind classes: `<span class="iconify mdi--home"></span>`
- Predefined and fully typed global variables:
  - `VITE_APP_VERSION` is read from `package.json` version at build time and stored to the store as `store.appMeta.version`
  - `VITE_APP_BUILD_EPOCH` is populated as `new Date().getTime()` at build time and stored to the store as `store.appMeta.buildTime`

### Very Fast (TM) To Reset

1. Delete `src/components/HelloWorld.vue` and `src/components/__tests__/HelloWorld.spec.ts`
2. Delete the content from `@/pages/IndexPage.vue`
3. Delete demo styles from `@/assets/base.css`
4. Profit!11

## Elsewhere

- Follow [@uninen on Twitter](https://twitter.com/uninen) or [unessa.net on Bluesky](https://bsky.app/profile/uninen.net)
- Read my continuously updating learnings from Vite / Vue / TypeScript and other Web development topics from my [Today I Learned site](https://til.unessa.net/)

## Contributing

Contributions are welcome! Please follow the [code of conduct](./CODE_OF_CONDUCT.md) when interacting with others.
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