Javascript Vue

Vue components built with Tailwind CSS1 min read

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

Pin It on Pinterest