# Vue Adapter Work Plan

## Goal

Create an official Vue adapter inside `gnexus-ui-kit` so Vue projects use one stable integration layer instead of repeating slightly different local adaptations.

The adapter must keep the current GNexus UI Kit CSS and visual class names as the source of truth. Vue components should normalize markup, props, events, slots, and interactive behavior without becoming a separate design system.

## Architecture

Add a thin Vue layer:

```text
src/vue/
  components/
  composables/
  plugin.js
  index.js
```

The adapter exports named components and a plugin:

```js
import "gnexus-ui-kit/dist/css/kit.css";
import { GnButton, GnTabs } from "gnexus-ui-kit/vue";

app.use(GnexusUiVue);
```

Vue is treated as a peer/external dependency. The kit build should not bundle Vue.

## Component Strategy

Use Vue-native state for app-level interactive components:

- tabs via `v-model`;
- accordion via local controlled state;
- modal via `v-model:open`;
- drawer via `v-model:open`;
- toast and confirm via composables/provider.

Keep legacy browser JS for plain HTML demo and non-Vue usage.

## First Implementation Wave

Implement a practical base set:

- `GnButton`
- `GnIconButton`
- `GnBadge`
- `GnAlert`
- `GnCard`
- `GnTabs`
- `GnAccordion`
- `GnModal`
- `GnDrawer`
- `GnToastProvider`
- `useToast`
- `GnConfirmDialog`
- `GnInput`
- `GnTextarea`
- `GnSelect`
- `GnCheckbox`
- `GnSwitch`
- `GnTable`
- `GnPageHeader`

## Documentation

Add Vue-specific docs:

```text
docs/vue.md
docs/vue/component-map.md
docs/vue/ai-usage-guide.md
```

The AI guide should clearly say which Vue components to use instead of hand-written GNexus markup, which classes are owned by the adapter, and how to import CSS/assets.

## Build

Add a Vue adapter build target that outputs:

```text
dist/vue/index.js
```

The normal `npm run build` should keep producing the existing kit output and also produce the Vue adapter.

## Example

Add a small `examples/vue` app that demonstrates imports and common usage. The example can have its own package metadata and depend on Vue/Vite.

## Validation

Minimum validation:

- `npm run build`
- `npm run build:vue`
- smoke-check generated `dist/vue/index.js`
- keep existing demo server working