Vite + Vue 3 + TypeScript + Tailwind + Playwright Starter Template v5.3.0

Opinionated, production ready template for Vite and Vue 3. MIT licensed, available on GitHub.

Hello World Component

Edit components/HelloWorld.vue to test hot module replacement.

Template Project Features

The idea of this template is to bundle as many often used and useful features pre-configured as possible. If you don't need something, just remove it!

  • Pinia store (fully typed Vuex store available in template version 1.13 )
  • Routing using vue-router. See demo page . (Also routable fom the store .)
  • TailwindCSS w/ JIT-mode, purge, plugins, and production minimization pre-configured
  • Vue-friendly Eslint and Prettier configuration - use as is or tweak to your liking
  • Alias @ to project_root/src
  • Predefined and typed global variables
  • Playwright e2e and component testswith coverage preconfigured
  • Github Workflows preconfigured to run e2e and component tests automatically on every push

Project setup and usage

Using Volar extension for VSCode is recommended to take full advance of the new script setup sugar and full TypeScript support in Vue SFC templates. (This is totally optional but recommended as it results much better DX!) See official IDE Support documentation for more details.

Install dependencies

pnpm i

Run development server

pnpm dev

Run unit + component tests (Vitest)

pnpm test

Run e2e tests (Playwright)

pnpm test-e2e

Build for production

pnpm build

Other

See package.json for all available commands.

Notes and further documentation

Typed ENV Variables

Vite exposes a special meta.env object for ENV variables (see official docs). This template extends that object and adds custom typed variables which you can easily use and modify to your needs.

See vite.config.js and src/env.d.ts for the configuration and src/pages/BaseTemplate.vue for usage example.

Code Coverage

Code coverage is provided from unit + component tests by Vitest and V8.

E2E coverage is a bit trickier to do because of the way Vite works. Typical Vite pipelines don't use babel at all which is needed above for automatically instrument the transpilated code. Vite is powered by eslint which has decided code coverage being out of scope .

Elsewhere

Contributing

Contributions are welcome! Please follow the code of conduct when interacting with others.