Move vehicle-info display logic out of HomePage into a reusable VehicleInfo component. The component accepts vehicle, loading, notFound, and plate props and renders the correct state with priority: vehicle card > loading > not found. Follows the small-page-component pattern from CODING_GUIDELINES.md. - Create VehicleInfo.vue with 3-state v-if chain and scoped styles - Define and export VehicleInfo interface (make/model/year/color) - Add VehicleInfo.spec.ts with 7 tests covering all states and priority edge cases - Update HomePage.vue to use VehicleInfo, replacing 3 inline v-if/else-if blocks with a single component tag - Remove 5 unused CSS classes from HomePage (home__status, home__vehicle, home__vehicle-text, home__not-found, home__not-found p) - Update AGENTS.md to require thorough commit messages with bullet points |
||
|---|---|---|
| .. | ||
| public | ||
| src | ||
| .gitignore | ||
| .prettierrc | ||
| eslint.config.ts | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| tsconfig.app.json | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
Vue 3 + TypeScript + Vite
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.
Learn more about the recommended Project Setup and IDE Support in the Vue Docs TypeScript Guide.