@gaconkzk/flyui-vue3 NPM

FlyUI Components framework

Trying to make my own component framework.

Required peer dependencies for windicss classes:

windicss
@windicss/plugin-animations

Typescript missing

for now please add declare module '@gaconkzk/flyui-vue3' into your typescripton definition file

installation

pnpm add @gaconkzk/flyui-vue3

Use in your main app:

import { createApp } from 'vue'
import App from './App.vue'

import Flyui from '@gaconkzk/flyui-vue3'
import '@gaconkzk/flyui-vue3/css'


const app = createApp(App)
app.use(Flyui)

app.mount('#app')

Note you might need windicss and plugin-windicss-animation for better css control in your project (animation not worked when you don't have them)

Theme primary color

we need prepare 4 colors variables named f-primary theme - or you can use 4 default color for theme

Define global css variables using 4 colors. You can use any color you want, for example I'm using 4 colors from windicss (defined in windi.config.ts)

:root {
  --f-primary: theme('colors.prim.2');
  --f-primary-lighter: theme('colors.prim.2-lighter');
  --f-primary-shadow: theme('colors.prim.2-shadow');
  --f-primary-highlight: theme('colors.prim.2-highlight');
  --t-primary: theme('colors.textColor.prim.2');
}

Flies icons license

<div>Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>