@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

Components

This project is still in early development. New components will be added regularly over the coming months.

• Menu Button (Dropdown)
• Listbox (Select)
• Switch (Toggle)

Roadmap

This project is still in early development, but the plan is to build out all of the primitives we need to provide interactive Vue examples of all of the components included in Tailwind UI, the commercial component directory that helps us fund the development of our open-source work like Tailwind CSS.

This includes things like:

• Modals
• Tabs
• Slide-overs
• Mobile menus
• Accordions

...and more in the future.

We'll be continuing to develop new components on an on-going basis, with a goal of reaching a pretty fleshed out v1.0 by the end of the year.