humanonlyweb/ui

Installation

Nuxt module or Vue plugin.

Markdown

Install

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

bun add @humanonlyweb/ui
Copy code

Nuxt

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

// 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
  },
});
Copy code

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>.

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");
Copy code

Then import what you use:

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

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:

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.
Copy code

Toasts

Add the viewport once, near your app root:

<template>
  <NuxtPage />
  <UiToastViewport />
</template>
Copy code