Vue 3 + Typescript + Vite + TailwindCSS + Vitest + Cypress + ESLint + Prettier

This template should help get you started developing with Vue 3 and Typescript in Vite.

Opinionated Starter Kit

Uses the additional following libraries:

1. Tailwind CSS (because utility-CSS scales better)
2. Vitest (because running tests should be fast)
3. Cypress (because UI Component-testing rox!)
4. Prettier (auto-formats when save in VS Code)
5. ESLint (Fix problems in your TypeScript Code)
6. simple-import-sort (Sort import statements)

Getting Started

Make sure you have git and node installed.

Navigate to your desired folder to save the files and execute the following commands:

npx degit https://github.com/linusang/vite-starter-kit.git

// say yes if prompted

npm install

// if you use git

git init

// running the app

npm run dev

// open browser and navigate to http://localhost:3333

For Testing

• Vitest to test business logic (use npm run vitest)
• Cypress to test UI/Component (use npm run cypress and use npm run cypress-ci to run in CI environment)

For CSS

• Uses Tailwind CSS because of this article
• Makes use of JIT feature

Recommended IDE Setup

VSCode + Volar + Prettier + ESLint.

If Using <script setup>

<script setup> is a syntactic-sugar feature. To get proper IDE support for the syntax, use Volar .