Firefly UI

Vue 3 UI component library for Firefly.

Install

Install the npm package by running the following code.

npm i @mrbakieness/firefly-ui

Usage

CSS

For the components to be displayed correctly import the css in your main css file

@import '@mrbakieness/firefly-ui/css';

JS

To have access to all components you can import them into your main javascript file. You will then have to loop over them and register the components. Yoiur file will look a something like this.

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import * as fireUI from '@mrbakieness/firefly-ui'

const app = createApp(App)

// Loop over all firefly ui components
let keys = Object.keys(fireUI)
for (const key of keys) {
    app.component(key, fireUI[key])
}

app.mount("#app");

Otherwise you can import the specfic component into a .vue file.

<script setup>
import { fireButton } from '@mrbakieness/firefly-ui'
</script>

Then you can use the component in your template like the following.

<fireButton color='yellow' colorStyle="outline">button</fireButton>