# Vue adapter

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

## Подключение

```js
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";
```

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

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

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

## Пример

```vue
<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-`:

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

## Toasts

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

```vue
<template>
  <GnToastProvider>
    <RouterView />
  </GnToastProvider>
</template>
```

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

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

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

## Сборка adapter

```bash
npm run build:vue
```

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