{"id":13810565,"url":"https://github.com/P4sca1/nuxt-headlessui","last_synced_at":"2025-05-14T10:34:07.778Z","repository":{"id":61924575,"uuid":"556302896","full_name":"P4sca1/nuxt-headlessui","owner":"P4sca1","description":"Headless UI integration for Nuxt. Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2025-05-13T17:39:17.000Z","size":201396,"stargazers_count":176,"open_issues_count":17,"forks_count":7,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-13T18:43:31.348Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/P4sca1.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-10-23T14:46:51.000Z","updated_at":"2025-05-03T21:46:45.000Z","dependencies_parsed_at":"2024-03-30T09:20:53.866Z","dependency_job_id":"cf2abf38-7c63-4b98-b917-4fa8d3454ba7","html_url":"https://github.com/P4sca1/nuxt-headlessui","commit_stats":{"total_commits":77,"total_committers":6,"mean_commits":"12.833333333333334","dds":"0.38961038961038963","last_synced_commit":"42b6391177cdc22ed098572a2fd27eccb99cc66b"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/P4sca1%2Fnuxt-headlessui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/P4sca1%2Fnuxt-headlessui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/P4sca1%2Fnuxt-headlessui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/P4sca1%2Fnuxt-headlessui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/P4sca1","download_url":"https://codeload.github.com/P4sca1/nuxt-headlessui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254121242,"owners_count":22018128,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T02:01:00.622Z","updated_at":"2025-05-14T10:34:02.736Z","avatar_url":"https://github.com/P4sca1.png","language":"Vue","funding_links":[],"categories":["Vue","Starter Kits"],"sub_categories":[],"readme":"# Nuxt Headless UI ![CircleCI](https://circleci.com/gh/P4sca1/nuxt-headlessui.svg?style=svg)\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n\n[Headless UI](https://headlessui.com) integration for Nuxt.\nCompletely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.\n\nHeadless UI documentation for Vue: https://headlessui.com/vue/menu\n\n- [✨ \u0026nbsp;Release Notes](/CHANGELOG.md)\n- [🏀 Online playground](https://stackblitz.com/github/P4sca1/nuxt-headlessui?file=playground%2Fapp.vue)\n\n## Features\n- Automatic dynamic imports (no global components)\n- Fully type safe\n- Configurable component prefix (defaults to `Headless`)\n\n## Quick Setup\n1. Add `nuxt-headlessui` dependency to your project\n\n```bash\nnpx nuxi@latest module add headlessui\n```\n\n2. Add `nuxt-headlessui` to the `modules` section of `nuxt.config.ts`\n\n```ts\n{\n    modules: [\n        'nuxt-headlessui'\n    ],\n\n    // Optionally change the default prefix.\n    headlessui: {\n        prefix: 'Headless'\n    }\n}\n```\n\n3. Add the following lines to your `app.vue` file inside `\u003cscript setup\u003e`:\n\n\u003e [!NOTE]  \n\u003e This is only needed if you use versions prior to `vue@3.5.0` or `@headlessui/vue@1.7.23`. More recent versions use the native `useId` composable provided by Vue.\n\n```ts\n// Use SSR-safe IDs for Headless UI\nprovideHeadlessUseId(() =\u003e useId())\n```\nThis is required to avoid hydration issues, because of id mismatches. Both composables will be auto-imported by nuxt. The `provideHeadlessUseId` composable is an alias for the `provideUseId` composable from `@headlessui/vue`. `import { provideUseId } from '@headlessui/vue'` directly [won't work out of the box](https://github.com/P4sca1/nuxt-headlessui/issues/41).\n\nThat's it! You can now use Headless UI in your Nuxt app ✨\n\n## Usage\nAfter completing setup, simply use the headless components in your components and pages and style them with your favourite CSS framework.\nYou don't have to import the components.\nHere is an example of a Listbox (Select), which uses heroicons and Tailwind CSS:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"container mx-auto\"\u003e\n    \u003cdiv class=\"w-72\"\u003e\n      \u003cHeadlessListbox v-model=\"selectedPerson\"\u003e\n        \u003cdiv class=\"relative mt-1\"\u003e\n          \u003cHeadlessListboxButton\n            class=\"relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm\"\n          \u003e\n            \u003cspan class=\"block truncate\"\u003e{{ selectedPerson.name }}\u003c/span\u003e\n            \u003cspan\n              class=\"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2\"\n            \u003e\n              \u003cChevronUpDownIcon\n                class=\"h-5 w-5 text-gray-400\"\n                aria-hidden=\"true\"\n              /\u003e\n            \u003c/span\u003e\n          \u003c/HeadlessListboxButton\u003e\n\n          \u003ctransition\n            leave-active-class=\"transition duration-100 ease-in\"\n            leave-from-class=\"opacity-100\"\n            leave-to-class=\"opacity-0\"\n          \u003e\n            \u003cHeadlessListboxOptions\n              class=\"absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm\"\n            \u003e\n              \u003cHeadlessListboxOption\n                v-for=\"person in people\"\n                v-slot=\"{ active, selected }\"\n                :key=\"person.name\"\n                :value=\"person\"\n                as=\"template\"\n              \u003e\n                \u003cli\n                  :class=\"[\n                    active ? 'bg-amber-100 text-amber-900' : 'text-gray-900',\n                    'relative cursor-default select-none py-2 pl-10 pr-4',\n                  ]\"\n                \u003e\n                  \u003cspan\n                    :class=\"[\n                      selected ? 'font-medium' : 'font-normal',\n                      'block truncate',\n                    ]\"\n                  \u003e{{ person.name }}\u003c/span\u003e\n                  \u003cspan\n                    v-if=\"selected\"\n                    class=\"absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600\"\n                  \u003e\n                    \u003cCheckIcon class=\"h-5 w-5\" aria-hidden=\"true\" /\u003e\n                  \u003c/span\u003e\n                \u003c/li\u003e\n              \u003c/HeadlessListboxOption\u003e\n            \u003c/HeadlessListboxOptions\u003e\n          \u003c/transition\u003e\n        \u003c/div\u003e\n      \u003c/HeadlessListbox\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ref } from 'vue'\nimport { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'\n\nconst people = [\n  { name: 'Wade Cooper' },\n  { name: 'Arlene Mccoy' },\n  { name: 'Devon Webb' },\n  { name: 'Tom Cook' },\n  { name: 'Tanya Fox' },\n  { name: 'Hellen Schmidt' }\n]\nconst selectedPerson = ref(people[0])\n\u003c/script\u003e\n```\n\nIf you are using [Tailwind CSS](https://tailwindcss.com/), you can use the [@headlessui/tailwindcss](https://github.com/tailwindlabs/headlessui/tree/main/packages/%40headlessui-tailwindcss) plugin to get modifiers like `ui-open:*` and `ui-active:*`.\nThere is a [unocss primitives preset]https://github.com/zirbest/unocss-preset-primitives/tree/main)  which does this in case if you are using UnoCss.\n\n## Development\n\n```bash\n# Install dependencies\npnpm install\n\n# Generate type stubs\npnpm run dev:prepare\n\n# Develop with the playground\npnpm run dev\n\n# Build the playground\npnpm run dev:build\n\n# Run ESLint\npnpm run lint\n```\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/nuxt-headlessui/latest.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-version-href]: https://npmjs.com/package/nuxt-headlessui\n\n[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-headlessui.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-downloads-href]: https://npmjs.com/package/nuxt-headlessui\n\n[license-src]: https://img.shields.io/npm/l/nuxt-headlessui.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[license-href]: https://npmjs.com/package/nuxt-headlessui\n\n[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js\n[nuxt-href]: https://nuxt.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FP4sca1%2Fnuxt-headlessui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FP4sca1%2Fnuxt-headlessui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FP4sca1%2Fnuxt-headlessui/lists"}