Vite + Vue 3 + TypeScript + Tailwind + Playwright Starter Template v{{ VERSION }}
-
- Opinionated, production ready template for Vite and Vue 3. MIT licensed,
- available on GitHub.
-
-
-
-
-
-
-
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!
-
- 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 tests 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
-
-
- TL;DR: due to Vite and esbuild design decisions and ongoing work in this area, code
- coverage is not yet added to this template.
-
-
-
- I have a fully configured Vue 3 + TypeScript + Cypress + Coverage reporting + GitLab and
- GitHub CI `vue-cli` template project available at
- https://gitlab.com/uninen/vue-cli-template. That's a real world example of proper coverage configuration that works automatically
- in CI. But. This setup doesn't work with Vite.
-
-
-
- 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 . Vitest can be configured to produce code coverage as well but that only counts unit
- tests.
-
- Lots of continuously updating learnings from Vite / Vue / TypeScript and other Web
- development topics on my
- Today I Learned site
-
-
-
-
Contributing
-
-
- Contributions are welcome! Please follow
-
- the code of conduct
-
- when interacting with others.
-
-
-
-
-
+
+
+
+
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!
+
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 .
+