Nuxt Headless UI

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]

Headless UI integration for Nuxt.
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

Headless UI documentation for Vue: https://headlessui.com/vue/menu

- ✨  Release Notes
- 🏀 Online playground

Features

- Automatic dynamic imports (no global components)
- Fully type safe
- Configurable component prefix (defaults to Headless)

Quick Setup

1. Add nuxt-headlessui dependency to your project

``bash
npx nuxi@latest module add headlessui
`

2. Add nuxt-headlessui to the modules section of nuxt.config.ts

`ts
{
modules: [
'nuxt-headlessui'
],

// Optionally change the default prefix.
headlessui: {
prefix: 'Headless'
}
}
`

3. Add the following lines to your app.vue file inside
`

If you are using Tailwind CSS, you can use the @headlessui/tailwindcss plugin to get modifiers like ui-open: and ui-active:.
There is a [unocss primitives preset]https://github.com/zirbest/unocss-preset-primitives/tree/main) which does this in case if you are using UnoCss.

Development

`bash


Install dependencies

pnpm install

Generate type stubs

pnpm run dev:prepare

Develop with the playground

pnpm run dev

Build the playground

pnpm run dev:build

Run ESLint

pnpm run lint
``

[npm-version-src]: https://img.shields.io/npm/v/nuxt-headlessui/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/nuxt-headlessui

[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-headlessui.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/nuxt-headlessui

[license-src]: https://img.shields.io/npm/l/nuxt-headlessui.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/nuxt-headlessui

[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com