@e-xode/vui NPM

Vui, Another Vuejs U.I Library

NPM Version

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')
}