# Installation

> Nuxt module or Vue plugin.

## Install

Not on npm yet, so this command won't work. It will once the package is published.

```bash
bun add @humanonlyweb/ui
```

## Nuxt

Components and composables are auto-imported, and `core.css` is added for you.

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@humanonlyweb/ui/nuxt"],
  ui: {
    prefix: "Ui", // <UiButton>, <UiSelect>, …
    css: true, // inject core.css
    composables: true, // auto-import useForm, useField, useToast
  },
});
```

## Vue

Install the plugin and import `core.css`. `link` is your router's link component, used by `<Button to>`; without it, a string `to` becomes a plain `<a>`.

```ts
import { createUi } from "@humanonlyweb/ui";
import { createApp } from "vue";
import { RouterLink } from "vue-router";
import "@humanonlyweb/ui/core.css";

createApp(App)
  .use(createUi({ link: RouterLink }))
  .mount("#app");
```

Then import what you use:

```vue
<script setup lang="ts">
import { Button, Select } from "@humanonlyweb/ui";
</script>
```

The examples use the Nuxt names, like `<UiButton>`. In Vue, drop the `Ui`.

## AI agents

The package ships these docs as Markdown, matching the installed version. Point your agent at them in `AGENTS.md` or `CLAUDE.md`:

```md
For @humanonlyweb/ui, read node_modules/@humanonlyweb/ui/dist/docs/README.md
before using a component. It indexes a page per component: props, events, slots
and styling hooks.
```

## Toasts

Add the viewport once, near your app root:

```vue
<template>
  <NuxtPage />
  <UiToastViewport />
</template>
```