lx/ui

Powerful and flexible Vue.js 3 components and vanilla CSS styles library, originally developed for various enterprise apps.

Focus on business logic, not boilerplate.

Play around

Check out our 🌐 Demo and ℹ️ List of Components for live demo sandbox.

Read the docs

• ℹ️ Design Tokens
• ℹ️ CSS Bundling
• ℹ️ Action Definitions
• ℹ️ Progressive Web App
• ℹ️ Component Preload
• ℹ️ Library Preload
• ℹ️ Shell Custom Mode
• ℹ️ Create LX Plugin
• ℹ️ Directives
• 🌐 Forms
• 🌐 Colors
• 🌐 Icons
• 🌐 Utils

Get

Get using bun:

bun add '@dativa-lv/lx-ui@latest'

Get using pnpm:

pnpm i '@dativa-lv/lx-ui@latest'

For migration tips refer to ℹ️ Migration Guide

Use

Install with pinia store:

import { createPinia } from 'pinia';
import { createLx } from '@dativa-lv/lx-ui';
import App from '@/App.vue';
…
const myApp = createApp(App);
myApp.use(createPinia());
myApp.use(createLx());
…

Make sure to import a proper CSS bundle in your main entry file such as main.js:

import '@dativa-lv/lx-ui/dist/bundles/lx-bt-demo.css';

LX/UI styles apply only within an element that has the .lx class. Usually, this should be the application root element:

<body class="lx">
  <div id="app"></div>
</body>

One can also embed LX inside another application by wrapping it in a .lx element

<div class="lx">
  <LxButton label="Click me" />
</div>

Most convenient way of using the components is by using them inside LxShell:

<template>
  <LxShell>
    <RouterView />
  </LxShell>
</template>

Extend

• lx/builders - a companion library containing declarative design tools for views, forms, etc.

Develop

bun install
bun run dev

Read more about development in ℹ️ Development manual

Vite Plugins

LX/UI now includes several Vite plugins to enhance your development experience and application security. These plugins are designed to seamlessly integrate with your Vite-based projects.

For detailed information on available plugins and their usage, please refer to our ℹ️ Vite Plugins Documentation.