vxVue

Introduction

VxVue provides a few Vue components styled with Tailwind CSS. At some point a more verbose documentation than this brief readme might emerge.

Requirements

  • Tailwind CSS 2.*
  • Vue.js 3.*

The official Tailwind CSS forms plugin is used to provide basic styling of the form components using the class strategy which allows the styling of non-form elements consistently.
An easy to configure color theming is applied.

Try it out

Run

npm install

and

npm run dev

and navigate to the reported URL by Vite.

http://localhost:3000

The sample page gives simple examples of all currently available components.

Provided components

So far the following components have been implemented:

element description
formelements/password-input a simple input with toggle button which toggles between type='button' and type='text'
formelements/form-select a select element adapted for Vue.js integration
formelements/date-input and formelements/datepicker the input element can be used for guided date inputs and is (optionally) part of the datepicker
formelements/form-switch a fancy checkbox
formelements/form-radio-group as the name suggests – a group of related radio elements
formelements/form-checkbox-group a group of related checkbox elements; allows multiple selected options
sortable a sortable table; the column attribute specifies the columns and their sorting options
autocomplete a simple autocomplete component
message-toast displays a notification which dismisses itself after a configurable timeout
alert promise-based alert component which must be manually dismissed; button labelling, and their returned values can be configured
pagination A pagination component for arbitrary items; opinionated in its layout
tabs A tabs component which allows both badges and icons

GitHub

View Github