iSPA Element UI

A Component Library for VueJs (Vue 3) base on Tailwind Css.

Quick Start

To use it, open up your terminal in the desired directory and run the following command:

npm install ispa-element

Then add the library into your main js project

import {createApp} from 'vue'
import iSPAElement from 'ispa-element'

const app = createApp(App)
app.use(iSPAElement).mount('#app')

Module Loader

This is the recommended way if your application uses vue-cli or has a webpack based build with vue-loader configured. Import the components as .vue files for seamless integration within your project where path of each component is available at the "import" section of a component documentation.

impot { IButton } from 'ispa-element'

In the next step, register the component with the tag name you'd like to use.

//  In app.js
import {createApp} from 'vue'
const app = createApp(App)

app.component(IButton.name, IButton)
// OR app.component('i-button', IButton)

app.mount('#app')

//  In component.vue
export default {
  components: { IButton }
}

::: tip Note You can use any tag name, but notes these tag name maybe conflict with others tag name, so make sure it's unique tag name to use. :::

Documents

Please visit here to read full documents of iSPA Element.

Special Thanks

Thanks for amazing library PrimeVue and Element UI, our very first version has been inspired from these library.

Milestone

• [ ] Card Component
• [ ] Loading Component/Directives
• [ ] Nav/Tabs Component
• [ ] Progress bar Component
• [ ] Dropdown Component
• [x] Badge Component (2020-12-26)
• [x] Divider Component (2020-12-20)
• [x] Switch Component (2020-12-20)
• [x] Alert Component (2020-12-18)
• [x] Form/Input Component (2020-12-16)
• [x] Button Component (2020-12-09)

CHANGELOG

You can follow Change Logs by click here (CHANGELOG.md)

Versioning

Maintained under the Semantic Versioning guidelines.

License

MIT © Malayvuong

Wanna support?

If you like this project and want to contribute us, then you can send us an email via [email protected] for more informations.

⬆ back to top