Integrates Vue 3, Vite, TypeScript, and Tailwind CSS
VueViteStarter
vue-setup — Vue Starter Template
By pyyupsk
A starter template based on Vue 3, Vite, TypeScript, and Tailwind CSS, integrating Vue Router, shadcn-vue, VueUse, PWA, and build compression, using Bun as the package manager.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
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-16View source
What stands out
A quick read of the recorded project description.
Includes Vue Router file-based routing and shadcn-vue components
Integrates VueUse composable utility functions
Supports PWA and Service Worker via vite-plugin-pwa
Uses vite-plugin-compression2 to generate Gzip and Brotli compressed builds
Provides ESLint, Prettier, and TypeScript type-checking scripts
Template Details
This template is aimed at developers who need to quickly set up a Vue 3 project. The README states that its tech stack includes Vue 3, Vite, TypeScript, and Tailwind CSS, and integrates Vue Router, shadcn-vue, VueUse, vite-plugin-pwa, and vite-plugin-compression2. Code quality tools are ESLint and Prettier, and the package manager is Bun. The project provides a file-based routing directory pages, component directories (icon, layout, sections, ui), constants and utility directories, as well as entry files such as app.vue, main.ts, and router.ts.
Before use, Node.js 18+ or Bun and Git are required. Installation steps are: clone the repository, enter the directory, run bun install, then run bun run dev. The development server address is http://localhost:3000. Available scripts include dev, build, preview, format, lint, lint:fix, and typecheck. The README does not provide deployment steps, environment variable configuration, testing plans, or compatibility notes beyond specific framework versions.
VueViteStarter
Is it right for your project?
Use Cases
- Starting a new Vue 3 single-page application project
- Vue projects requiring TypeScript and Tailwind CSS
- Projects wanting built-in file-based routing and shadcn-vue components
- Static sites needing PWA offline support and build compression
Suitable For
- Front-end developers using Vue 3 and Vite
- Teams preferring TypeScript and Tailwind CSS
- Vue projects needing shadcn-vue and VueUse
- Developers using Bun as the package manager
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Requires Node.js 18+ or Bun, and Git
- 2
After cloning the repository, run bun install to install dependencies
- 3
Run bun run dev to start the development server, default address http://localhost:3000
- 4
Available scripts include build, preview, format, lint, lint:fix, typecheck
- 5
The README does not provide deployment steps or environment variable configuration instructions
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license in a public repository; the free scope is the code of that 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 that 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 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
https://github.com/pyyupsk/vue-setup/blob/main/LICENSEhttps://github.com/pyyupsk/vue-setup/blob/main/README.mdPermission is hereby granted, free of charge
Original License Text
Compiled by DeepSeek based on repository license and README ·2026-10-16. 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 · 88 / 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-04-09
- Screenshot last checked
- 2026-10-16
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: codex-user-requested-batch-review-20261017 · 2026-10-16
Inspect the recorded source material
SHA-256: b1848b2b8aea7a2ca1244937acfb044fd6024e374fc8c8b4c77d840578e5c881
2026-10-16T00:39:32.845Z
Source file / repository<div align="center"> # Vue.js Setup **A modern Vue.js starter template with Vite, TypeScript, Tailwind CSS, and best practices built-in.** [](https://vuejs.org/) [](https://vitejs.dev/) [](https://www.typescriptlang.org/) [](https://tailwindcss.com/) [](LICENSE) [Features](#-features) • [Quick Start](#-quick-start) • [Tech Stack](#-tech-stack) • [Project Structure](#-project-structure) • [Contributing](#-contributing) </div> --- ## Features - **Vue 3** - Latest Vue with Composition API and `<script setup>` - **Vite** - Lightning fast development with HMR - **TypeScript** - Full type safety with excellent DX - **Vue Router** - File-based routing system - **Tailwind CSS** - Utility-first CSS framework - **shadcn-vue** - Beautiful, accessible components - **VueUse** - Essential Vue composition utilities - **ESLint + Prettier** - Code quality and formatting - **PWA Ready** - Offline support with service workers - **Compression** - Gzip and Brotli compressed builds ## Quick Start ### Prerequisites - [Node.js](https://nodejs.org/) 18+ or [Bun](https://bun.sh/) - [Git](https://git-scm.com/) ### Installation ```bash # Clone the repository git clone https://github.com/pyyupsk/vue-setup.git my-app # Navigate to the project cd my-app # Install dependencies bun install # Start development server bun run dev ``` Your app will be running at `http://localhost:3000` ### Available Scripts | Script | Description | | ------------------- | ---------------------------- | | `bun run dev` | Start development server | | `bun run build` | Build for production | | `bun run preview` | Preview production build | | `bun run format` | Format code with Prettier | | `bun run lint` | Lint code with ESLint | | `bun run lint:fix` | Fix linting issues | | `bun run typecheck` | Run TypeScript type checking | ## Tech Stack | Category | Technology | | --------------- | ----------------------------------------------------------------------------- | | Framework | [Vue 3](https://vuejs.org/) | | Build Tool | [Vite 7](https://vitejs.dev/) | | Language | [TypeScript](https://www.typescriptlang.org/) | | Styling | [Tailwind CSS 4](https://tailwindcss.com/) | | Components | [shadcn-vue](https://www.shadcn-vue.com/) | | Utilities | [VueUse](https://vueuse.org/) | | Routing | [Vue Router](https://router.vuejs.org/) | | PWA | [vite-plugin-pwa](https://vite-pwa-org.netlify.app/) | | Compression | [vite-plugin-compression2](https://github.com/nonzzz/vite-plugin-compression) | | Package Manager | [Bun](https://bun.sh/) | | Code Quality | [ESLint](https://eslint.org/), [Prettier](https://prettier.io/) | ## Project Structure ```text vue-setup/ ├── public/ # Static assets (favicon, PWA icons) ├── src/ │ ├── assets/ │ │ └── css/ # Global styles and Tailwind config │ ├── components/ │ │ ├── icon/ # Icon components │ │ ├── layout/ # Layout components (Header, Footer) │ │ ├── sections/ # Page sections (Hero, Features, CTA) │ │ └── ui/ # UI components (Button, Card, Badge) │ ├── constants/ # Constants and configuration │ ├── lib/ # Utility functions │ ├── pages/ # Route pages (file-based routing) │ ├── app.vue # Root component │ ├── main.ts # Application entry │ └── router.ts # Vue Router configuration ├── index.html # HTML template └── vite.config.ts # Vite configuration ``` ## Contributing Contributions are welcome! Please feel free to submit a Pull Request. 1. Fork the repository 2. Create your feature branch (`git checkout -b feature/amazing-feature`) 3. Commit your changes (`git commit -m 'Add some amazing feature'`) 4. Push to the branch (`git push origin feature/amazing-feature`) 5. Open a Pull Request ## Resources - [Vue 3 Documentation](https://vuejs.org/) - [Vite Documentation](https://vitejs.dev/) - [TypeScript Guide](https://vuejs.org/guide/typescript/overview.html) - [Tailwind CSS](https://tailwindcss.com/) - [shadcn-vue](https://www.shadcn-vue.com/) - [VueUse](https://vueuse.org/) ## License This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. --- <div align="center"> Built with Vue.js </div>
Explore similar templates
Compare previews and descriptions within the same stack and category.
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 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
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
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 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
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