1. Project Overview

DL UI

A low-code component library based on Vue 3.

Meaning of DL

• D stands for Dream and Dynamic.
• L stands for Low Code.

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

Current Component Roadmap

Highlights

• Render forms with minimal code.
• Zero external dependencies. No third-party packages required.
• Built-in commonly used form components with support for component extensions.
• Complex form validation can be configured through rules, completely separating validation logic from form business logic.
• ✍️ Developed with TypeScript, providing complete type definitions.
• More features are under development. Contributions are welcome...

Motivation Behind Component Development

• I'm relatively lazy and don't like doing repetitive work. Whenever an existing tool can solve a problem, I prefer not to reinvent the wheel. It all started with the configuration-based forms in my previous Vue 2 project (built on Vant). I really liked the approach of rendering an entire form through JSON configuration. Due to my work, I currently focus mainly on low-code platform products (form ecosystems), which is also an area I'm particularly interested in.
• Another reason for open-source development is to meet more people. Everyone is welcome to discuss and exchange ideas.

Source: DL UI Official Documentation

5. Tech Stack

Installation

Install via npm

$ npm i @xuanmo/dl-ui

Install using yarn or pnpm

$ yarn add @xuanmo/dl-ui

$ pnpm add @xuanmo/dl-ui

Import the Component

import { createApp } from 'vue'

// 1. Import components
import DLUI, { validator } from '@xuanmo/dl-ui'

// 2. Import validation localization and register it
import zhCN from '@xuanmo/validator/locale/zh-CN.json'
validator.localize(zhCN)

// 3. Import component styles
import '@xuanmo/dl-ui/dist/index.css'

const app = createApp()

// 4. Register components
app.use(DLUI)

Special thanks

• Thanks to JetBrains for providing a non-commercial open-source software development license.
• Thanks to JasKang for providing the Markdown preview solution.
• Thanks to Misaki Tomoko for providing the online component execution solution.