![The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands](https://cdn.sanity.io/images/cgdhsj6q/production/fb4bdc0528052803264cc04fd04f8efc68b67422-1024x1024.webp?w=400&fit=max&auto=format)
Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
@headlessui/vue
Advanced tools
A set of completely unstyled, fully accessible UI components for Vue 3, designed to integrate beautifully with Tailwind CSS.
@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.
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>
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 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 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.
A set of completely unstyled, fully accessible UI components for Vue 3, designed to integrate beautifully with Tailwind CSS.
Please note that this library only supports Vue 3.
# npm
npm install @headlessui/vue
# Yarn
yarn add @headlessui/vue
For full documentation, visit headlessui.dev.
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
For casual chit-chat with others using the library:
FAQs
A set of completely unstyled, fully accessible UI components for Vue 3, designed to integrate beautifully with Tailwind CSS.
The npm package @headlessui/vue receives a total of 302,279 weekly downloads. As such, @headlessui/vue popularity was classified as popular.
We found that @headlessui/vue demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.