Newer
Older
gnexus-ui-kit / docs / vue-adapter-plan.md
@Eugene Sukhodolskiy Eugene Sukhodolskiy 15 hours ago 2 KB Add Vue adapter foundation

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:

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

The adapter exports named components and a plugin:

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:

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:

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