vue3-ts-vite-starter-template
v3.1.4
Published
Vue.js 3 TypeScript / Vite starter template with Pinia, Vue Router, Tailwind and more.
Readme
vue3-ts-vite-starter-template
A single page app Vite starter template, created to easily bootstrap Vue.js 3 apps.
Features
- Vue 3
- Vite 8
- TypeScript 6
- Vitest 4 for unit testing
- Pinia 3 for state management
- Vue Router 5 for client-side routing
- Tailwind 4 for layout and styling
- SCSS variables inside Vue components
- Purgecss for eliminating unused CSS
- Knip for detecting unused files and exports
- Basic multiple layouts feature
- ESLint config based on neostandard with sensible defaults :relaxed:
- Prettier for code formatting
- Automated release workflow with semantic-release
Project setup
pnpm installCompiles and hot-reloads for development
pnpm run devCompiles and minifies for production
pnpm run buildRun your unit tests
pnpm run test:unitRun unit tests in non-watch mode
pnpm run test:unit-nowatchRun unit tests with coverage output
pnpm run test:unit-coverageLints files
pnpm run lintLints and fixes files
pnpm run lint-fixRuns Typechecks
pnpm run typecheckDetects unused files and exports
pnpm run knipRuns all quality checks
pnpm run qualityThis runs knip, lint, typecheck, unit tests in non-watch mode, and build.
Testing conventions
- Test files are colocated with source files using
*.spec.ts - Shared test infrastructure lives in
tests/ tests/vitest.router-mock-setup.tsprovides a default router mock for route-aware teststests/vitest.helpers.tsexposescreateWrapperForfor tests that need shared mount setupcreateWrapperForincludes default Pinia plugin wiring and supports mergedglobal.directives- Prefer plain
mountfor simple component tests and usecreateWrapperForonly when shared setup is required
