cc74ad0bd0
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
- .woodpecker.yaml: image paths -> library/autojanet-{agent,dispatcher}
- .woodpecker.yaml: secret names RS_HARBOR_USER / RS_HARBOR_PASS (global)
- container/Dockerfile: restore COPY skills/, skills/ populated from opencode config
- skills/: 84 opencode skills bundled into image
- k8s/manifests: update image refs to library/
59 lines
4.4 KiB
Markdown
59 lines
4.4 KiB
Markdown
# 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
|