Tiny Vue JS 3 UI Framework based on Tailwind CSS and Vue JS 3
I have been working with Vue JS for a long time and have always been annoyed by the fact that there is no UI framework that is as easy to use as Bootstrap was. So I decided to create my own UI framework. I have been working with Tailwind CSS for a long time and I am very enthusiastic about it. That's why I've decided to create a tiny, small UI framework based on Tailwind CSS and Vue JS 3.
Run npm or yarn installation of the vue3-head package:
$ yarn add vue3-rex-ui$ npm install vue3-rex-uiIt requires only one line to install the package in your Vue application.
import { createApp } from 'vue'
import App from './App.vue'
import RexUI from 'vue3-rex-ui'
const app = createApp(App)
app.use(RexUI) // here the magic happens
app.mount('#app')Every component is now available in your Vue application, because of automatic global registration.
This is the main component of the UI framework. It contains the header, main and footer components and is the main container for your application. You don't have to use it if you don't build e.g. a Single Page App and just want to use the atomic components like buttons, inputs, etc.
<rex-app>
<rex-header>
<rex-nav>
<rex-nav-item>Home</rex-nav-item>
<rex-nav-item>About</rex-nav-item>
<rex-nav-item>Contact</rex-nav-item>
</rex-nav>
</rex-header>
<rex-main>
<rex-container>
<rex-row>
<rex-col>
<rex-alert variant="success" size="md">This is a medium sized success alert</rex-alert>
</rex-col>
</rex-row>
<rex-row>
<rex-col>
<rex-button variant="primary">Click me</rex-button>
</rex-col>
</rex-row>
<rex-row>
<rex-col>
<rex-input-text placeholder="Enter your text here" v-model="yourTextVariable" />
</rex-col>
</rex-row>
</rex-container>
</rex-main>
<rex-footer>
<rex-nav>
<rex-nav-item>Home</rex-nav-item>
<rex-nav-item>About</rex-nav-item>
<rex-nav-item>Contact</rex-nav-item>
</rex-nav>
</rex-footer>
</rex-app>This is a simple alert component. It has a variant and a size property. The variant property can be one of the following: primary, secondary, success, danger, warning, info, light, dark. The size property can be one of the following: sm, md, lg.
<rex-alert variant="success" size="md">This is a medium sized success alert</rex-alert>This is a simple button component. It has a variant property. The variant property can be one of the following: primary, secondary, success, danger, warning, info, light, dark.
<rex-button variant="primary">Click me</rex-button>This is a simple input text component. It has a placeholder property and a v-model property. The placeholder property is the placeholder text of the input field. The v-model property is the variable that is bound to the input field.
<rex-input-text placeholder="Enter your text here" v-model="yourTextVariable" />I will add more components in the future. If you have any suggestions, please let me know. You can signup to the newsletter on my website Vue JS Seminar to get updates on the UI framework.
MIT with Linkware License. You can use this package for free in your projects, but you have to link to my website Vue JS Seminar in your project.