# ispa-element

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

Latest version **0.7.2** (published 2021-01-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install ispa-element
pnpm add ispa-element
yarn add ispa-element
bun add ispa-element
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.7.2 |
| Published | 2021-01-13 |
| First published | 2020-12-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 2.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | malayvuong |
| Maintainers | malayvuong |
| Keywords | ispa-element, tailwindcss, vue3 |

## Links

- npm: https://www.npmjs.com/package/ispa-element
- Repository: https://github.com/iSPA-io/ispa-element
- Homepage: https://github.com/iSPA-io/ispa-element#readme
- Issues: https://github.com/iSPA-io/ispa-element/issues
- npm.io page: https://npm.io/package/ispa-element

## Dependencies (7)

- [dayjs](https://npm.io/package/dayjs.md) 1.x
- [lodash](https://npm.io/package/lodash.md) ^4.17.20
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [@popperjs/core](https://npm.io/package/@popperjs/core.md) ^2.4.4
- [async-validator](https://npm.io/package/async-validator.md) ^3.4.0
- [normalize-wheel](https://npm.io/package/normalize-wheel.md) ^1.0.1
- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.1

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 0.7.2 (latest) — 2021-01-13
- 0.7.1 — 2021-01-12
- 0.7.0-git — 2021-01-02
- 0.7.0 — 2020-12-26
- 0.6.13 — 2020-12-25
- 0.5.0 — 2020-12-19
- 0.4.1 — 2020-12-18
- 0.3.4 — 2020-12-17
- 0.3.3-README — 2020-12-17
- 0.3.3 — 2020-12-17
- 0.2.6 — 2020-12-16
- 0.2.5 — 2020-12-11
- 0.2.3 — 2020-12-10
- 0.2.2 — 2020-12-10
- 0.2.1 — 2020-12-10
- … 35 more at https://npm.io/package/ispa-element/versions

## README

# iSPA Element UI

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

<p align="center">
  <a href="https://npmcharts.com/compare/ispa-element?minimal=true" target="_blank"><img src="https://img.shields.io/npm/dm/ispa-element.svg?sanitize=true" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/ispa-element" target="_blank"><img src="https://img.shields.io/npm/v/ispa-element.svg?sanitize=true" alt="Version"></a>
  <a href="https://lerna.js.org/" target="_blank"><img src="https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg" alt="lerna"></a>
</p>

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

```sh
npm install ispa-element
```

Then add the library into your main js project
```js
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.
```js
impot { IButton } from 'ispa-element'
```

In the next step, register the component with the tag name you'd like to use.
```js
//  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](https://element.ispa.io/) to read full documents of iSPA Element.

# Special Thanks
Thanks for amazing library [PrimeVue](https://primefaces.org/primevue/showcase/#/) and [Element UI](https://element.eleme.io/#/), 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)](CHANGELOG.md)

## Versioning

Maintained under the [Semantic Versioning guidelines](https://semver.org/).

## License

[MIT](https://opensource.org/licenses/MIT) © [Malayvuong](https://malayvuong.com/)

## Wanna support?
If you like this project and want to contribute us, then you can send us an email via malayvuong@gmail.com for more informations.

[⬆ back to top](#)

---
_Source: https://npm.io/package/ispa-element · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._