Essential session storage is required to sign in. Optional analytics remain off unless you allow them.
Build a small reusable Vue 3 component library and a demo app using it. Include: a Modal/Dialog that uses NAMED and SCOPED slots for flexible content (and <Teleport> to render at the body); at least one form control that supports v-model on the component via the defineModel() macro (3.4+); a custom directive (e.g. v-click-outside) implemented with directive DOM hooks; and animated list add/remove with <TransitionGroup> (keyed). Factor shared logic into a composable. Package it so it builds with Vite (a library build) and document each component's props/slots/events.
Named + scoped slots used correctly (e.g. in the Modal); components are genuinely reusable and well-composed; Teleport where appropriate.
A component supports v-model via defineModel (modelValue/update internals understood); a working custom directive using DOM lifecycle hooks.
<TransitionGroup> animates keyed list changes (enter/leave/move) smoothly; transitions are named, not ad-hoc CSS hacks.
Builds as a library with Vite; shared logic in a composable; each component's props/slots/events documented.
Use this README structure to make the work reviewable.
DevPath fetches a read-only, size-capped snapshot. Submitted code is never executed.
# A reusable component library ## Goal Build a small reusable Vue 3 component library and a demo app using it. Include: a Modal/Dialog that uses NAMED and SCOPED slots for flexible content (and <Teleport> to render at the body); at least one form control that supports v-model on the component via the defineModel() macro (3.4+); a custom directive (e.g. v-click-outside) implemented with directive DOM hooks; and animated list add/remove with <TransitionGroup> (keyed). Factor shared logic into a composable. Package it so it builds with Vite (a library build) and document each component's props/slots/events. ## Acceptance criteria - [ ] Slots & composition: Named + scoped slots used correctly (e.g. in the Modal); components are genuinely reusable and well-composed; Teleport where appropriate. - [ ] v-model & directives: A component supports v-model via defineModel (modelValue/update internals understood); a working custom directive using DOM lifecycle hooks. - [ ] Transitions: <TransitionGroup> animates keyed list changes (enter/leave/move) smoothly; transitions are named, not ad-hoc CSS hacks. - [ ] Packaging: Builds as a library with Vite; shared logic in a composable; each component's props/slots/events documented. ## Verification - [ ] Document installation and run commands. - [ ] Record automated checks and their exact commands. - [ ] Add representative output, screenshots, or a short demo where useful. - [ ] Confirm failure paths and known constraints. ## Decision log ### Decision title - Context: - Choice: - Alternatives considered: - Tradeoffs: ## Evidence - Link each rubric criterion to the file, test, or artifact that demonstrates it. ## Known limitations - List what is intentionally out of scope and what should be improved next.