Awesome UI components using Tailwind for Vue3

Requirements

• Vue.js ^3.0.0

Recommended IDE Setup

• VS Code + Volar

Contributions

All contributions are welcomed. Help me to enrich this repository.

If you find any bugs in the examples, please file an issue.

Installation

$ npm install awesome-vue-ui
// OR
$ yarn add awesome-vue-ui

// After installation be sure to add these two files to main.js file so you can use components globally:
import { createApp } from 'vue';
import VueUI from "awesome-vue-ui"
import "awesome-vue-ui/dist/style.css";

createApp(App)
.use(VueUI)
.mount('#app');

Usage

      <VAlert 
            variant="Success"
            message="Your try was successful!"
            close_able
            size="md"
            rounded
            center
            :value="showAlert"
            @input="showAlert = false">
      </VAlert>

// In data property add:
 data(){
      return {
            showAlert: false
      }
},

Default values of props

Property	Type	Default value
Alert Component-----	:-------------:	---------------:
title	boolean	true
message	string	'No message'
variant	string	'Success'
close_able	boolean	true
size	string	'md'
rounded	boolean	true
value	boolean	false
--------------------	:-------------:	---------------:
Button Component----	:-------------:	---------------:
bgColor	string	'bg-green-500'
textColor	string	'bg-black-500'

TODO

• Add modal component