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
@
toproject_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
- Follow @Uninen on Twitter
- 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.