Vui, Another Vuejs U.I Library

VUI is an open source UI library providing customizable web components for Vue.js.

Features

• 3 types of web components: Html, UI, and layout, written in a way to provide simple implementation and easy customization. 24 components are available in the current release.
• Styles and layouts allow easy CSS overriding (no inline definitions, no messy !importants, ...).
• Compatible with server rendering ( SSR ).
• Integrates fontawesome-free Icons library.
• Provides documentation and tests.

Online documentation and live demo are available here

Package and releases are available on NPM

Get started

Install first the library:

npm  install -s  @e-xode/vui

use vui in your vue app

In your Vue application:

import { createApp } from  'vue'
import { createI18n } from  'vue-i18n'
import App from  './App.vue'
import vui from  '@e-xode/vui'

const main =  createApp(App)
main.use(vui)
main.use(new  createI18n({
    legacy: false,
    locale: 'en',
    messages: { en: [] }
}))

Notes:

• The current version of VUI works only with vue-i18n and option legacy = false (translations are components isolated)
• Version of node currently supported: 21

load vui style

@import  "@e-xode/vui/dist/style.css";

load @fontawesome icons

@import "@fortawesome/fontawesome-free/css/all.css";
@font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: 400;
    src:
    url('@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2') format('woff2'),
    url('@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf') format('truetype')
}
@font-face {
    font-family: 'Font Awesome 5 Regular';
    font-style: normal;
    font-weight: 400;
    src:
    url('@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2') format('woff2'),
    url('@fortawesome/fontawesome-free/webfonts/fa-regular-400.ttf') format('truetype')
}
@font-face {
    font-family: 'Font Awesome 5 Solid';
    font-style: normal;
    font-weight: 900;
    src:
    url('@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2') format('woff2'),
    url('@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf') format('truetype')
}

Run & develop vui sources

copy  .env_sample  .env

Optional: edit .env file content and update values according to your config

with docker

docker-compose  up

or local with Node / NPM

npm  install
npm  run  dev