@headlessui/vue

What is @headlessui/vue?

@headlessui/vue is a set of completely unstyled, fully accessible UI components for Vue.js, designed to integrate seamlessly with Tailwind CSS. It provides the building blocks for creating custom, accessible UI components without imposing any design decisions.

What are @headlessui/vue's main functionalities?

Dialog (Modal)

The Dialog component is used to create accessible modals. The example demonstrates how to open and close a dialog with a button click.

<template>
  <div>
    <button @click="isOpen = true">Open Dialog</button>
    <Dialog v-if="isOpen" @close="isOpen = false">
      <DialogOverlay />
      <DialogTitle>Payment successful</DialogTitle>
      <DialogDescription>
        Your payment has been successfully submitted. We’ve sent you an email with all of the details of your order.
      </DialogDescription>
      <button @click="isOpen = false">Got it, thanks!</button>
    </Dialog>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Dialog, DialogOverlay, DialogTitle, DialogDescription } from '@headlessui/vue';

export default {
  components: { Dialog, DialogOverlay, DialogTitle, DialogDescription },
  setup() {
    const isOpen = ref(false);
    return { isOpen };
  }
};
</script>

Listbox (Select)

The Listbox component is used to create accessible select dropdowns. The example shows how to bind a list of options to a Listbox and handle selection.

<template>
  <div>
    <Listbox v-model="selectedPerson">
      <ListboxButton>{{ selectedPerson.name }}</ListboxButton>
      <ListboxOptions>
        <ListboxOption v-for="person in people" :key="person.id" :value="person">
          {{ person.name }}
        </ListboxOption>
      </ListboxOptions>
    </Listbox>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue';

export default {
  components: { Listbox, ListboxButton, ListboxOptions, ListboxOption },
  setup() {
    const people = ref([
      { id: 1, name: 'Wade Cooper' },
      { id: 2, name: 'Arlene Mccoy' },
      { id: 3, name: 'Devon Webb' }
    ]);
    const selectedPerson = ref(people.value[0]);
    return { people, selectedPerson };
  }
};
</script>

Popover

The Popover component is used to create accessible popover elements. The example demonstrates a simple popover with a button that reveals a panel of links.

<template>
  <div>
    <Popover>
      <PopoverButton>Solutions</PopoverButton>
      <PopoverPanel>
        <a href="#">Insights</a>
        <a href="#">Automations</a>
        <a href="#">Reports</a>
      </PopoverPanel>
    </Popover>
  </div>
</template>

<script>
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue';

export default {
  components: { Popover, PopoverButton, PopoverPanel }
};
</script>

Other packages similar to @headlessui/vue

vue-accessible-modal

vue-accessible-modal is a Vue.js component for creating accessible modals. It focuses on providing a simple API for creating modals that are compliant with accessibility standards. Compared to @headlessui/vue, it is more specialized and does not offer a wide range of UI components.

vue-select

vue-select is a Vue.js component for creating customizable select dropdowns. It offers a rich set of features like tagging, filtering, and async options. While it provides more advanced features for select elements, it does not offer the breadth of components available in @headlessui/vue.

vue-popperjs

vue-popperjs is a Vue.js wrapper for Popper.js, a library used to manage poppers in web applications. It provides a flexible way to create tooltips, popovers, and dropdowns. Compared to @headlessui/vue, it is more focused on positioning and does not include other UI components.

README

@headlessui/vue

A set of completely unstyled, fully accessible UI components for Vue 3, designed to integrate beautifully with Tailwind CSS.

Installation

Please note that this library only supports Vue 3.

# npm
npm install @headlessui/vue

# Yarn
yarn add @headlessui/vue

Documentation

For full documentation, visit headlessui.dev.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discuss Headless UI on GitHub

For casual chit-chat with others using the library:

Join the Tailwind CSS Discord Server