chore(web): adopt @vue/tsconfig preset instead of manual tsconfig #386
Description
Summary
@vue/tsconfig is installed as a devDependency in web/package.json but neither tsconfig.json nor tsconfig.node.json extends from it. We wrote a manual config that overlaps ~80% with what the official preset provides, but misses several Vue-recommended settings.
What we're missing by not using the preset
| Setting | What it does | Impact |
|---|---|---|
resolveJsonModule: true |
Allows importing .json files with type safety |
Minor — enables a useful pattern |
moduleDetection: "force" |
Treats all files as modules | Prevents cryptic "Cannot redeclare block-scoped variable" errors |
jsxImportSource: "vue" |
Vue-specific JSX handling | Needed for proper Vue JSX support |
verbatimModuleSyntax: true |
Type-only imports handled correctly | Important for <script setup> — the official recommendation |
Proposed approach
- Refactor
web/tsconfig.jsonto extend@vue/tsconfig/tsconfig.dom.json - Keep our overrides on top:
baseUrl,paths(@/*alias),types: ["vitest/globals"],importHelpers,isolatedModules - Remove redundant settings that the preset already provides
- Run
npm run type-checkand fix any new errors from stricter settings - Verify all dashboard tests and build still pass
Context
Discovered during dependency PR review (#371). The package was installed but never wired up — likely from initial project scaffolding. Adopting the preset keeps us aligned with Vue ecosystem evolution (settings get updated with each @vue/tsconfig release).