Layui 3 v3.0.0‑alpha: New Build Tools, ES Modules & Theme Customization

Overview

Layui 3 v3.0.0‑alpha is an initial restructuring of the project, not the final release. It reuses Layui 2 components for the core development infrastructure, so the component API remains identical to v2.

Release History

v3.0.0‑alpha.1 (2025‑11‑16)

Further optimization of core development facilities

Eliminate all lint warnings

Optimize module entry files

Improve fonts and icons

Synchronize 2.13.1 components; future beta will decouple from v2

v3.0.0‑alpha.0 (2025‑11‑04)

Full migration to ES Module, abandoning Layui 2’s lightweight module system

Build pipeline upgraded from Gulp to Rollup + Babel + PostCSS

Three import styles are provided:

Browser IIFE via <script src="dist/layui.js"></script> Browser ESM import

Node.js ESM import

Code formatting and linting enforced with Prettier + ESLint during local development, git commit, and CI

Unit testing with Jest, including a visual test page

Development mode now loads the watch‑built code instead of raw source

Existing Layui 2 components gain CSS Variable support for easier theming

Browser compatibility follows the default browserslist configuration and drops IE support

Version Significance

Publishing the 3.0.0‑alpha version opens the main line for Layui 3, allowing focus on the new core architecture and component library. It also offers a modern‑tooling branch for developers who still rely on Layui 2, enabling them to continue using the same component direction with the upgraded infrastructure.

Usage

Importing Components

Browser IIFE

<script src="dist/layui.js"></script>
<script type="module">
  const { layer, form, table } = layui;
  layer.msg('Hello World');
</script>

Browser ESM

import { layui, lay, layer } from 'dist/layui.esm.js';
layer.msg('Hello World');

Node.js build‑environment ESM

# install
npm i layui

import { layui, lay, layer } from 'layui';
layer.msg('Hello World');

Global Theme Modification

:root,
.light {
  /* default theme colors */
  --lay-color-primary: #16baaa;
  --lay-color-accent: #16b777;
}

Additional CSS variables are defined in src/css/var.css.