vue3-ts-vite-starter-template

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 install

Compiles and hot-reloads for development

pnpm run dev

Compiles and minifies for production

pnpm run build

Run your unit tests

pnpm run test:unit

Run unit tests in non-watch mode

pnpm run test:unit-nowatch

Run unit tests with coverage output

pnpm run test:unit-coverage

Lints files

pnpm run lint

Lints and fixes files

pnpm run lint-fix

Runs Typechecks

pnpm run typecheck

Detects unused files and exports

pnpm run knip

Runs all quality checks

pnpm run quality

This 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.ts provides a default router mock for route-aware tests
• tests/vitest.helpers.ts exposes createWrapperFor for tests that need shared mount setup
• createWrapperFor includes default Pinia plugin wiring and supports merged global.directives
• Prefer plain mount for simple component tests and use createWrapperFor only when shared setup is required

Customize configuration

See Configuration Reference.