Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ikeohachidi/ornament-ui
Vue 3 components for building web applications (WIP)
https://github.com/ikeohachidi/ornament-ui
agnostic component frontend javascript scss tailwind typescript ui ui-components vue vue3
Last synced: 24 days ago
JSON representation
Vue 3 components for building web applications (WIP)
- Host: GitHub
- URL: https://github.com/ikeohachidi/ornament-ui
- Owner: ikeohachidi
- License: mit
- Created: 2021-10-11T23:02:58.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-25T00:33:07.000Z (10 months ago)
- Last Synced: 2024-04-27T00:02:51.438Z (8 months ago)
- Topics: agnostic, component, frontend, javascript, scss, tailwind, typescript, ui, ui-components, vue, vue3
- Language: Vue
- Homepage: https://ornament.netlify.app
- Size: 1.52 MB
- Stars: 14
- Watchers: 3
- Forks: 1
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Ornament UI
A UI component library for Vue 3.
**Note:** Thanks for trying this out. Please take notice that this project is still in active development and doesn't have a v1 yet. As such you can
expect it'll be buggy. If you find any bugs or just want a feature please create an issue. **Thanks**
See it in action [Ornament Docs](https://ornament.netlify.com)
# Getting started
## Installation
### NPM
To install in your project NPM is the preferred way to go as it is what is used in development and what Ornament is built with.
```shell
$ npm install ornament-ui
```
### Yarn
Yarn installation
```shell
$ yarn add ornament-ui
```
## Registeration
#### Global (plugin)
To use as a plugin which will enable Ornament globally in every vue file and will also have no need for component registeration
```typescript
// main.ts || main.js
import OrnamentUI from 'ornament-ui';
const app = createApp(App)
.use(OrnamentUI)
.mount('#app')
```
#### Global (single component)
The approach above can also be used to register single components globally
```typescript
// main.ts || main.js
import { OrInput } from 'ornament-ui';
const app = createApp(App)
.component('or-input', OrInput)
.mount('#app')
```
#### Per component
Ornament can also be registered at a component level
```typescript
import { defineComponent } from 'vue';
import { OrInput } from 'ornament-ui';
export default defineComponent({
components: {
OrInput
}
})
```