Vite + Vue 3 + Typescript + Tailwind Starter

Simple, fully typed boilerplate.

Features

• ⚡️ Vue 3, Vite 2, pnpm - born with fastness
• 💪 Typescript 4.7 - of course! necessary
• 🔥 Use the new <script setup> syntax
• 🍍 State Management via Pinia 2 with persistedstate - The official Vue Store that you will enjoy using
• 💡 Vue Router v4 - The official router for Vue.js
• 🎉 NProgress - Page loading progress feedback
• 🎨 Tailwind CSS v3 w/ following plugins and configuration preinstalled:
  • tailwindcss/forms
  • tailwindcss/typography
  • tailwindcss/line-clamp
  • tailwindcss/aspect-ratio
  • firefox-variant
• Automatic package and component imports w/ unplugin-auto-import and unplugin-vue-components
• PostCSS 8 w/ postcss-nesting plugin and cssnano for minimizing production CSS
• Alias @ to <project_root>/src
• Predefined and fully typed global variables:
  • VITE_APP_VERSION is read from package.json version at build time
  • VITE_APP_BUILD_EPOCH is populated as new Date().getTime() at build time
• Using newest script setup syntax w/ Ref sugar (see the official Script Setup documentation and Ref Sugar RFC discussion)
• Vitest unit tests
• Playwright e2e + component tests
• GitHub workflows
  • Renovatebot for keeping up with dependencies
  • Automated unit tests
  • Automated component tests
  • Automated e2e tests
• GitLab CI config available up to versions 2.x

Coding Style

• Eslint

Recommended IDE Setup

• VSCode
• Volar
• Tailwind CSS IntelliSense

Project setup

install the dependencies

pnpm i

Development

Just run and visit http://localhost:8888

pnpm dev

Build

To build the App, run

pnpm build

And you will see the generated file in dist that ready to be served.

NOTE

1. Starter repositories:

• vite-ts-tailwind-starter
• vite-boot

2. Merged and updated repository is here