{
 "schema_version": 1,
 "generated": "2026-10-20",
 "id": "posva-medula--inspect-vue-stores-and-routes",
 "repo": "posva/medula",
 "repo_url": "https://github.com/posva/medula",
 "repo_slug": "posva-medula",
 "title": "Inspect Vue Pinia stores and walk routes with an agent",
 "page_title": "How to inspect Vue Pinia stores and walk routes with an agent with Medula",
 "summary": "Let an agent read Pinia store state and open Vue Router routes in a running Vue app.",
 "who": "A Vue 3 developer whose bug depends on Pinia store values or a specific route, and who wants an agent to check both on the running app.",
 "problem": "Reproducing a bug that depends on store contents or a deep route means navigating the app manually and reading state from browser tools.",
 "outcome": "The agent reads the Pinia store values, moves the app to the requested Vue Router route, and reports what it finds.",
 "steps": [
  "Install Medula and Vite DevTools with `pnpm add -D medula @vitejs/devtools`.",
  "In vite.config.ts, set `devtools: true` and add `medula()` next to `vue()` in plugins.",
  "Add the MCP server to your agent's configuration with command `npx` and args `devframe connect`.",
  "Start your dev server, open the app in your browser, and complete any DevTools connection code prompt.",
  "Ask the agent to read a Pinia store or open a named route, then compare the result with the page."
 ],
 "agent_prompt": "Using the medula MCP tools from the medula repo, connect to the running Vue dev server for <app-port>, read the state of the Pinia store named <store-name>, then open the route <route-path>. Expected output: the store state and the route the page now shows. Verify that the page displays the same route the agent reports.",
 "agents": [
  "any"
 ],
 "difficulty": "Intermediate",
 "time": "30 minutes",
 "basis": "readme",
 "caveat": "Pinia and Vue Router support is listed only for Vue apps, so this use case does not apply to React, Svelte, or Solid projects.",
 "category": "Software and DevOps",
 "tags": [
  "Software and DevOps"
 ],
 "lang": "typescript",
 "requirements": [
  "A web app built with Vue 3, React, Svelte 5, or Solid, run through Vite 8, Nuxt (with Nuxt DevTools 4), or Next.js (App Router)",
  "pnpm and Node.js available to install the package",
  "An MCP-capable coding agent to connect to devframe",
  "A browser tab open to the running app"
 ],
 "risk": "none",
 "seen_in_the_wild": false,
 "mentioned_publicly": false,
 "risks": [],
 "best": false,
 "score": 0.8,
 "evidence": [],
 "url": "https://dedupedai.com/use-cases/posva-medula/inspect-vue-stores-and-routes/",
 "md": "https://dedupedai.com/use-cases/posva-medula/inspect-vue-stores-and-routes/index.md",
 "disclaimer": "Deduped lists open-source repositories that belong to other people. We do not own, maintain, audit, or vouch for any of them, and a repo appearing here is not an endorsement or a safety check. The use cases, steps, and prompts are written by AI and may be incomplete, outdated, or just wrong. Where a use case is marked \"Seen in the wild\", we link to public posts where someone described something similar, but we have not verified those posts and the use case itself is still our AI's own write-up. Use all of this at your own risk. Only run code, commands, or agents on systems and accounts you are authorized to use, and read the code and every command before you run it, especially anything that touches credentials, files, or the network. Nothing here is professional, security, legal, or financial advice. All trademarks and project names belong to their respective owners, and their use here does not imply affiliation. Content is provided as is, without warranties of any kind. Found a mistake, a safety problem, or something you want removed? Email hello@dedupedai.com and we will look at it promptly.",
 "api": "https://dedupedai.com/api/v1/usecases/posva-medula--inspect-vue-stores-and-routes.json",
 "api_version": "v1"
}