Vue Headless UI is a MIT licensed project that is developed and maintained by Ioan-Horia Rotaru.
The idea behind this project is to allow the users to style their components in whatever way they want to without writing massive amounts of JavaScript.
This library is heavily inspired by Headless UI created by the team at Tailwind and falls within the same scope with the addition of more components and a focus on from inputs.
The only dependency of this library is VeeValidate. This is due to the form inputs needing a robust and reliable method of validation.
This library is written in TypeScript and ONLY supports Vue 3.
Docs are available at https://horia16.github.io/vue-headless-ui-docs - this it still very early in development and might change in the future.
Use npm or yarn to install the library.
npm install vue-headless-ui
or
yarn add vue-headless-ui
import { defineComponent, ref } from "vue";
import { HeadlessInput, InputField, InputLabel, InputError } from "vue-headless-ui";
export default defineComponent({
name: "HelloWorld",
components: { HeadlessInput, InputField, InputLabel, InputError },
...
And in the template
<headless-input v-model="model">
<input-label text="Example Label" />
<input-field />
<input-error />
</headless-input>
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
This project is licensed under the MIT license.