Vue adapter

vmk-ui-kit/vue предоставляет официальный Vue 3 adapter. Используйте его компоненты вместо ручной разметки kit-классов.

Подключение

import "vmk-ui-kit/dist/css/kit.css";
import "vmk-ui-kit/dist/assets/fonts/phosphor-icons/src/css/icons.css";
import { GnButton, GnInput, GnModal } from "vmk-ui-kit/vue";

Глобальная регистрация

import { createApp } from "vue";
import { VMKUiVue } from "vmk-ui-kit/vue";
import App from "./App.vue";

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

Пример

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

const tab = ref("overview");
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">Create</GnButton>
  <GnTabs v-model="tab" :items="tabs">
    <template #overview>Overview content</template>
    <template #activity>Activity content</template>
  </GnTabs>
</template>

Иконки

Все icon props должны использовать префикс ph-:

<GnButton icon="ph-house" />
<GnButton icon="ph-bold ph-spinner" loading />

Toasts

Оберните приложение один раз:

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

Используйте composable внутри потомков:

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

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

Сборка adapter

npm run build:vue

Выход: dist/vue/index.js.