Awesome
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 for full docs. A detailed changelog is available.
Features
- Vue 3 with Pinia store and vue-router routing
- Automatic imports via unplugin-auto-import and unplugin-vue-components
- Tailwind CSS with the official
aspect-ratio
,typography
andforms
plugins, plus automatic icons using @egoist/tailwindcss-icons - Comprehensive tooling configs for TypeScript, PostCSS 8 (w/
postcss-nesting
plugin andcssnano
), Eslint 9, 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 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 available as Tailwind classes:
<span class="i-mdi-home"></span>
- Predefined and fully typed global variables:
VITE_APP_VERSION
is read frompackage.json
version at build time and stored to the store asstore.appMeta.version
VITE_APP_BUILD_EPOCH
is populated asnew Date().getTime()
at build time and stored to the store asstore.appMeta.buildTime
Very Fast (TM) To Reset
- Delete
src/components/HelloWorld.vue
andsrc/components/__tests__/HelloWorld.spec.ts
- Delete the content from
@/pages/IndexPage.vue
- Delete demo styles from
@/assets/base.postcss
- Profit!11
Elsewhere
- Follow @uninen on Twitter
- Read my continuously updating learnings from Vite / Vue / TypeScript and other Web development topics from my Today I Learned site
Contributing
Contributions are welcome! Please follow the code of conduct when interacting with others.