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" });

Build

npm run build:vue

Outputs:

dist/vue/index.js

The normal npm run build also builds the Vue adapter.

Current Components

See Vue Component Map.

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