autojanet/skills/understand/frameworks/vue.md

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, and afterEach guards act as middleware for route transitions — used for authentication and data prefetching
• Single-file components (.vue): Each .vue file encapsulates template, script, and style in a single file — the <script setup> syntax is the recommended concise form
• Reactive refs and computed properties: ref() and reactive() create reactive state; computed() derives values that auto-update — understanding reactivity is key to tracing data flow
• Provide/inject for deep dependency passing: provide() and inject() pass values down the component tree without prop drilling — creates implicit dependencies that should be captured as edges