Vue AI Usage Guide

This document is for AI agents working inside Vue projects that consume GNexus UI Kit.

Rule

Prefer gnexus-ui-kit/vue components over hand-written kit markup.

Do not recreate modal, drawer, tab, toast, form, button, or table markup manually unless the adapter does not expose the needed component yet.

Required Imports

At app root:

import "gnexus-ui-kit/dist/css/kit.css";
import "gnexus-ui-kit/dist/assets/fonts/phosphor-icons/src/css/icons.css";

Use named imports:

import { GnButton, GnInput, GnModal } from "gnexus-ui-kit/vue";

Or global registration:

import { GnexusUiVue } from "gnexus-ui-kit/vue";
app.use(GnexusUiVue);

Component Selection

Use these mappings:

• button command: GnButton
• icon-only command: GnIconButton
• status label: GnBadge
• message block: GnAlert
• framed content: GnCard
• page title/actions: GnPageHeader
• text field: GnInput
• multiline field: GnTextarea
• select field: GnSelect
• boolean control: GnCheckbox or GnSwitch
• view switcher: GnTabs
• disclosure group: GnAccordion
• dialog: GnModal
• side panel: GnDrawer
• global notification: GnToastProvider + useToast
• confirmation: GnConfirmDialog
• structured rows: GnTable

Do Not

• Do not copy raw modal markup from demo partials into Vue apps.
• Do not call GNexusUIKit.Modals.create() from Vue components.
• Do not run Accordion.init() or Tabs.init() inside Vue components.
• Do not invent new variant names.
• Do not duplicate GNexus CSS in Vue component scoped styles.
• Do not bundle Vue into the UI-kit adapter.

Acceptable Raw Markup

Raw classes are acceptable for layout-only wrappers and content that has no Vue adapter yet:

<div class="form-grid">...</div>
<div class="demo-actions">...</div>

For interactive components, add or extend the adapter first.

Update Policy

When the base kit changes markup for a component, update the Vue adapter in this repository. Downstream projects should receive compatibility through dependency updates, not local rewrites.