Vue Framework Addendum
Injected into file-analyzer and architecture-analyzer prompts when Vue is detected. Do NOT use as a standalone prompt — always appended to the base prompt template.
Vue Project Structure
When analyzing a Vue project, apply these additional conventions on top of the base analysis rules.
Canonical File Roles
| File / Pattern | Role | Tags |
|---|---|---|
src/App.vue |
Root application component — mounts the top-level layout and router view | entry-point, ui |
src/main.ts, src/main.js |
Application bootstrap — creates Vue app instance, registers plugins, mounts to DOM | entry-point, config |
components/*.vue, components/**/*.vue |
Reusable UI components | ui |
views/*.vue, pages/*.vue |
Page-level components mapped to routes | ui, routing |
composables/*.ts, composables/*.js |
Composable functions — reusable stateful logic using Composition API | service, utility |
store/*.ts, stores/*.ts |
State management modules (Pinia stores or Vuex modules) | service, state |
router/*.ts, router/index.ts |
Vue Router configuration — route definitions, navigation guards | config, routing |
plugins/*.ts, plugins/*.js |
Vue plugin registrations — extend app functionality (i18n, auth, etc.) | config |
utils/*.ts, helpers/*.ts |
Pure utility functions | utility |
types/*.ts, types/*.d.ts |
TypeScript type definitions and interfaces | type-definition |
api/*.ts, services/*.ts |
API client functions and data-fetching logic | service |
directives/*.ts |
Custom Vue directives | utility |
tests/*.spec.ts, __tests__/*.spec.ts |
Unit and integration tests | test |
Edge Patterns to Look For
Component parent-child — When a parent component uses a child component in its <template>, create contains edges from the parent to the child. Template refs and slot usage further indicate composition relationships.
Composable usage — When a component or composable imports and calls a useX function, create depends_on edges from the consumer to the composable module. Composables are the primary mechanism for shared stateful logic.
Store actions/getters — When components or composables import and use a Pinia store (useXStore()), create depends_on edges from the consumer to the store. Store-to-store dependencies should also be captured.
Router view mapping — When router/index.ts maps paths to view components, create configures edges from the router to each view component. Navigation guards add middleware-like edges.
Plugin registration — When main.ts calls app.use(plugin), create configures edges from the bootstrap file to each plugin.
Architectural Layers for Vue
Assign nodes to these layers when detected:
| Layer ID | Layer Name | What Goes Here |
|---|---|---|
layer:ui |
UI Layer | components/, views/, pages/, layout components |
layer:service |
Service Layer | composables/, store/, stores/, api/, services/ |
layer:config |
Config Layer | router/, plugins/, main.ts, App.vue, configuration files |
layer:utility |
Utility Layer | utils/, helpers/, directives/, pure functions |
layer:test |
Test Layer | tests/, __tests__/, *.spec.ts |
Notable Patterns to Capture in languageLesson
- Composition API over Options API: Modern Vue favors
setup()and<script setup>with composables, replacing the Options API's data/methods/computed separation - Pinia for state management: Pinia stores provide type-safe, modular state with actions and getters — each store is independently defined and can depend on other stores
- Vue Router with navigation guards:
beforeEach,beforeEnter, andafterEachguards act as middleware for route transitions — used for authentication and data prefetching - Single-file components (.vue): Each
.vuefile encapsulates template, script, and style in a single file — the<script setup>syntax is the recommended concise form - Reactive refs and computed properties:
ref()andreactive()create reactive state;computed()derives values that auto-update — understanding reactivity is key to tracing data flow - Provide/inject for deep dependency passing:
provide()andinject()pass values down the component tree without prop drilling — creates implicit dependencies that should be captured as edges