Essential session storage is required to sign in. Optional analytics remain off unless you allow them.
Build a multi-page app (e.g. a movie or product browser) with Vue Router (createRouter + createWebHistory): a list view and a dynamic detail route (/items/:id) read via useRoute().params, programmatic navigation, and a navigation guard protecting one route (e.g. favorites) based on a simple auth flag. Manage shared state (favorites/cart) in a PINIA store (defineStore). Fetch data from a public API inside a reusable composable (useXxx) that exposes loading/error/data refs. Handle loading and error states in the UI.
Correct Vue Router setup with a dynamic param route, RouterView/RouterLink, and a working navigation guard (not ad-hoc redirects).
Shared state lives in a Pinia store with actions/getters; components read/update it instead of prop-drilling; reactive throughout.
Fetch logic is extracted into a useXxx composable returning reactive loading/error/data; states are surfaced in the UI.
Navigates without full reloads; no console errors; Vue 3 Composition API throughout.
Use this README structure to make the work reviewable.
DevPath fetches a read-only, size-capped snapshot. Submitted code is never executed.
# A multi-view app with Vue Router & Pinia ## Goal Build a multi-page app (e.g. a movie or product browser) with Vue Router (createRouter + createWebHistory): a list view and a dynamic detail route (/items/:id) read via useRoute().params, programmatic navigation, and a navigation guard protecting one route (e.g. favorites) based on a simple auth flag. Manage shared state (favorites/cart) in a PINIA store (defineStore). Fetch data from a public API inside a reusable composable (useXxx) that exposes loading/error/data refs. Handle loading and error states in the UI. ## Acceptance criteria - [ ] Routing: Correct Vue Router setup with a dynamic param route, RouterView/RouterLink, and a working navigation guard (not ad-hoc redirects). - [ ] Pinia state: Shared state lives in a Pinia store with actions/getters; components read/update it instead of prop-drilling; reactive throughout. - [ ] Composable & async: Fetch logic is extracted into a useXxx composable returning reactive loading/error/data; states are surfaced in the UI. - [ ] Correctness: Navigates without full reloads; no console errors; Vue 3 Composition API throughout. ## 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.