@dativa-lv/lx-ui
v2.2.12
Published
LX/UI
Keywords
Readme
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
- 🌐 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 devRead 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.