{"id":48586790,"url":"https://github.com/norbraet/vite-vue-ts-template","last_synced_at":"2026-04-08T18:13:22.592Z","repository":{"id":338273499,"uuid":"1157237787","full_name":"norbraet/vite-vue-ts-template","owner":"norbraet","description":"A modern, opinionated template for Vue 3 applications with TypeScript, featuring Feature-Sliced Design (FSD) architecture, Storybook-driven component documentation and testing, strict ESLint boundaries, automated Git hooks, and CI workflows for consistent, team-ready development.","archived":false,"fork":false,"pushed_at":"2026-03-19T22:14:15.000Z","size":342,"stargazers_count":2,"open_issues_count":13,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-20T08:04:10.682Z","etag":null,"topics":["commitlint","eslint","feature-sliced-design","fsd","lefthook","mise","pinia","prettier","storybook","template","typescript","vite","vitest","vue-i18n","vue-router","vue-test-utils","vue3","zod"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/norbraet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-13T15:38:18.000Z","updated_at":"2026-03-19T22:06:05.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/norbraet/vite-vue-ts-template","commit_stats":null,"previous_names":["norbraet/vite-vue-ts-template"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/norbraet/vite-vue-ts-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/norbraet%2Fvite-vue-ts-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/norbraet%2Fvite-vue-ts-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/norbraet%2Fvite-vue-ts-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/norbraet%2Fvite-vue-ts-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/norbraet","download_url":"https://codeload.github.com/norbraet/vite-vue-ts-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/norbraet%2Fvite-vue-ts-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31567671,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["commitlint","eslint","feature-sliced-design","fsd","lefthook","mise","pinia","prettier","storybook","template","typescript","vite","vitest","vue-i18n","vue-router","vue-test-utils","vue3","zod"],"created_at":"2026-04-08T18:13:21.099Z","updated_at":"2026-04-08T18:13:22.584Z","avatar_url":"https://github.com/norbraet.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue 3 + TypeScript Template\n\nA modern, opinionated template for Vue 3 applications with TypeScript, featuring **Feature-Sliced Design (FSD)** architecture, Storybook-driven component documentation and testing, strict ESLint boundaries, automated Git hooks, and CI workflows for consistent, team-ready development.\n\n---\n\n## Features\n\n- **Vue 3** with Composition API and `\u003cscript setup\u003e`\n- **TypeScript** with strict configuration\n- **Vite** for fast development \u0026 building\n- **Feature-Sliced Design (FSD)** with ESLint boundaries\n- **Storybook** for component documentation and interactive component testing\n- **ESLint + Prettier** for code quality \u0026 formatting\n- **Lefthook** Git hooks with Conventional Commits enforcement\n- **Vitest + Vue Test Utils** for unit and component testing\n- **Path aliases** for clean imports\n- **pnpm** for efficient dependency management\n- Fully **automation-ready**: format/lint/typecheck/test/PR checks\n\n---\n\n## Quick Start\n\n### Prerequisites\n\n- Node.js (LTS version recommended)\n- pnpm (`npm install -g pnpm`)\n\n### Setup\n\n```bash\ngit clone \u003cyour-repo-url\u003e\ncd \u003cyour-project-name\u003e\npnpm install\npnpm run hooks:install\npnpm dev\n```\n\n## Folder Structure\n\n```\nsrc/\n├── app/                    # App bootstrap: router, i18n, providers, global styles\n│   ├── providers/          # Pinia, Router, i18n providers\n│   ├── router/             # Route definitions\n│   └── styles/             # Base/global CSS\n├── pages/                  # Route-level components; orchestrate features\n├── features/               # Isolated business features\n│   └── \u003cfeature-name\u003e/\n│       ├── components/     # Feature-specific components\n│       ├── composables/    # Feature-specific composables\n│       ├── stores/         # Feature-specific Pinia stores\n│       ├── constants/      # Feature constants\n│       ├── lib/            # Feature services\n│       └── types/          # Feature-specific types\n└── shared/                 # Global reusable code\n    ├── components/         # Truly reusable UI components\n    ├── composables/        # Shared composables\n    ├── lib/                # Generic shared services\n    ├── i18n/               # Locales \u0026 types\n    ├── types/              # Shared TypeScript types\n    └── constants/          # App-wide constants\n```\n\n---\n\n## Architecture Rules\n\nFSD principles are strictly enforced with ESLint boundaries:\n\n| Layer      | Can Import From                 |\n| ---------- | ------------------------------- |\n| `shared`   | shared only                     |\n| `features` | shared + same feature           |\n| `pages`    | shared + any feature            |\n| `app`      | shared + features + pages + app |\n\n### Example\n\n```typescript\n// ✅ Allowed\nimport { httpClient } from '@/shared/lib/httpClient'\n\n// ❌ Forbidden\n\nimport { useAuth } from '@/features/auth/composables/useAuth' // different feature\n```\n\n## Available Script\n\n| Script                 | Description                         |\n| ---------------------- | ----------------------------------- |\n| `pnpm dev`             | Start dev server                    |\n| `pnpm build`           | Build production                    |\n| `pnpm preview`         | Preview production build            |\n| `pnpm storybook`       | Start Storybook locally             |\n| `pnpm build-storybook` | Build static Storybook output       |\n| `pnpm lint`            | ESLint with auto-fix                |\n| `pnpm lint:check`      | ESLint without fixing               |\n| `pnpm format`          | Prettier format                     |\n| `pnpm format:check`    | Check formatting                    |\n| `pnpm typecheck`       | vue-tsc type checking               |\n| `pnpm test`            | Vitest in watch mode                |\n| `pnpm test:run`        | Vitest single run (CI)              |\n| `pnpm test:coverage`   | Vitest single run + coverage report |\n| `pnpm test:storybook`  | Run Storybook interaction tests     |\n| `pnpm hooks:install`   | Install Lefthook Git hooks          |\n| `pnpm hooks:uninstall` | Uninstall Git hooks                 |\n\n## Storybook\n\nStorybook is part of the standard workflow in this template for both:\n\n- **Component documentation** via colocated `*.stories.ts` files and autodocs\n- **Component testing** via Storybook `play` functions and the Vitest addon\n\n### Start Storybook\n\n```bash\npnpm storybook\n```\n\nThis starts the Storybook dev server on `http://localhost:6006`.\n\n### Build Storybook\n\n```bash\npnpm build-storybook\n```\n\nUse this to generate a static Storybook build for review environments or publishing.\n\n### Run Storybook Tests\n\n```bash\npnpm test:storybook\n```\n\nThis runs Storybook interaction tests defined with `play` functions. Because these tests use Vitest browser mode with Playwright, they should be treated separately from the regular unit test and coverage workflow.\n\n### Story Conventions\n\n- Keep stories close to the component or page they document, for example `Component.stories.ts`\n- Use `tags: ['autodocs']` to generate documentation pages automatically\n- Use `play` functions for interaction-based component checks\n- Add decorators when a story needs layout wrappers or specific store state\n\n### Shared Storybook Setup\n\nThe Storybook preview is already wired with the same core providers used by the app:\n\n- **Pinia** for store-backed components\n- **Vue I18n** with English and German messages\n- **Vue Router** using an in-memory router\n- Global app styles from `src/app/styles/global.css`\n\nThis makes Storybook suitable for documenting and testing real feature and page components, not just isolated UI fragments.\n\n## GitHub Automation \u0026 Workflow\n\n### Pull Request Template\n\nPRs should follow `.github/pull_request_template.md`:\n\n- Checklist ensures **FSD boundaries**, i18n, state management, and testing rules\n- Conventional commits: `feat(...)`, `fix(...)`, `refactor(...)`\n\n### Issue Template\n\n- `.github/ISSUE_TEMPLATE/bug_report.yml`\n- `.github/ISSUE_TEMPLATE/feature_request.yml`\n\n### Auto-labeling\n\n- GitHub Action `.github/workflows/labeler.yml` assigns labels based on feature paths\n\n### CI Workflow\n\n- `.github/workflows/ci.yml` runs format, lint, typecheck, and unit tests on PRs automatically\n\n---\n\n## Page vs Feature Guidelines\n\n### Pages (src/pages/)\n\n- Orchestrate features\n- Handle route params \u0026 query\n- Manage layout \u0026 navigation\n- Keep thin, no business logic\n\n### Features (src/features/)\n\n- Encapsulate business logic\n- No routing dependencies\n- Reusable \u0026 isolated\n- Provide public API via index.ts\n\n### Shared (src/shared/)\n\n- Truly global components and composables\n- Generic services/utilities\n- No dependency on features or pages\n\n## Best Practices\n\n- Props down → events up for feature-page communication\n- Shared composables for cross-feature state\n- Page-level state only for coordinating multiple features\n- Avoid features importing other features\n- Avoid business logic inside pages\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnorbraet%2Fvite-vue-ts-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnorbraet%2Fvite-vue-ts-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnorbraet%2Fvite-vue-ts-template/lists"}