Headless UI integration for Nuxt
npm install nuxt-headlessui[![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
Headless)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.
`bashInstall dependencies
pnpm install
[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