Vue Adapter

GNexus UI Kit ships a Vue 3 adapter for projects that need stable Vue components instead of hand-written kit markup in every codebase.

The adapter is intentionally thin:

• CSS classes and visual behavior still come from dist/css/kit.css;
• Vue components normalize props, events, slots, and state;
• Vue runtime is external and must be installed by the host app;
• legacy dist/js/gnexus-ui-kit.js remains for plain HTML pages.

Install Contract

In a Vue project, import CSS once near the app root:

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

Then import components:

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

Or register everything:

import { createApp } from "vue";
import { GnexusUiVue } from "gnexus-ui-kit/vue";
import App from "./App.vue";

createApp(App).use(GnexusUiVue).mount("#app");

Example Usage

<script setup>
import { ref } from "vue";
import { GnButton, GnTabs, GnModal } from "gnexus-ui-kit/vue";

const tab = ref("overview");
const modalOpen = ref(false);

const tabs = [
  { id: "overview", label: "Overview", icon: "ph-chart-bar" },
  { id: "activity", label: "Activity", icon: "ph-clock" }
];
</script>

<template>
  <GnButton variant="secondary" icon="ph-plus" @click="modalOpen = true">
    Create
  </GnButton>

  <GnTabs v-model="tab" :items="tabs">
    <template #overview>Overview content</template>
    <template #activity>Activity content</template>
  </GnTabs>

  <GnModal v-model:open="modalOpen" title="Create item">
    Modal content
  </GnModal>
</template>

Toasts

Wrap the app once:

<template>
  <GnToastProvider>
    <RouterView />
  </GnToastProvider>
</template>

Use the composable inside descendants:

import { useToast } from "gnexus-ui-kit/vue";

const toast = useToast();
toast.success({ title: "Saved", text: "Changes applied" });

GnToastProvider intentionally keeps a single visible toast. Showing a new toast replaces the previous one. Use this contract for compact app feedback; add queue support in this repository if a project needs stacked notifications.

Build

npm run build:vue

Outputs:

dist/vue/index.js

The normal npm run build also builds the Vue adapter.

Vue example smoke check:

npm --prefix examples/vue install
npm run build:example:vue

The example uses a Vite alias for vue because gnexus-ui-kit is linked as a local file dependency. Published package consumers do not need that alias if vue is installed in the host project. The example build clears node_modules/.vite before vite build so Vite does not reuse stale linked-package cache after dist/vue changes.

kit.css currently references fonts through absolute /assets/... URLs. Vite may warn that those URLs are left for runtime resolution; host apps must serve dist/assets at /assets or adjust their asset pipeline accordingly.

Current Components

See Vue Component Map.

For props, emits, slots, and short examples, see Vue Component API.

For common screen patterns, see Vue Cookbook.

Layout And Data Patterns

Second-wave adapter components cover common application surfaces:

<script setup>
import { ref } from "vue";
import {
  GnToolbar,
  GnSearchField,
  GnDescriptionList,
  GnProgress,
  GnChip,
  GnChipGroup
} from "gnexus-ui-kit/vue";

const query = ref("");
const details = [
  { key: "owner", term: "Owner", value: "Ops Console" },
  { key: "status", term: "Status", value: "Active" }
];
</script>

<template>
  <GnToolbar title="Projects" meta="24 records">
    <template #actions>
      <GnSearchField v-model="query" />
    </template>
  </GnToolbar>

  <GnDescriptionList :items="details" />
  <GnProgress label="Rollout" :value="72" animated />

  <GnChipGroup>
    <GnChip variant="secondary" selected>Vue</GnChip>
    <GnChip variant="success">Stable</GnChip>
  </GnChipGroup>
</template>

For AI agents and project-specific rules, see Vue AI Usage Guide.

For compatibility rules and breaking-change policy, see Vue Migration Policy.

For publish and package validation steps, see Vue Release Checklist.