Headless UI
Headless UI integration for Nuxt. Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS
Installation
npm i -D nuxt-headlessui
Setup
Add the following lines to the modules section of nuxt.config.{ts,js}
modules: ['nuxt-headlessui']
Demo
Switch.vue
<script setup>
const enabled = ref(false)
</script>
<template>
<HeadlessSwitch v-model="enabled" :class="enabled ? 'bg-gradient-to-r from-[#62D1F5] to-[#6E6CF6]' : 'bg-white/25'" class="relative inline-flex h-7 w-14 items-center rounded-full">
<span :class="enabled ? 'translate-x-8' : 'translate-x-1'" class="inline-block w-5 aspect-square transform rounded-full bg-white duration-400 ease-in-out" />
</HeadlessSwitch>
</template>
Checkout more Headless UI components at the official site https://headlessui.com/