Getting Started with Layui-Vue: Installation and Basic Usage for Vue 3 Desktop Components

Layui-Vue provides a desktop component library for Vue 3, offering an alternative presentation style to the traditional Layui UI.

To install, run npm install @layui/layui-vue and then import the library in main.ts as shown:

import { createApp } from 'vue'
import Layui from '@layui/layui-vue'
import '@layui/layui-vue/lib/index.css'
import App from './App.vue'

createApp(App).use(Layui).mount('#app')

A basic entry page can be created with the following template:

<template>
  <lay-layout>
    <lay-header>
      <lay-logo>Layui Admin</lay-logo>
    </lay-header>
    <lay-side></lay-side>
    <lay-body>
      <router-view></router-view>
    </lay-body>
    <lay-footer>pearadmin.com</lay-footer>
  </lay-layout>
</template>

The latest release includes new features such as a clear event for the datePicker component, and several bug fixes and style optimizations for components like layer, popper, iconPicker, and form, as well as an upgrade of layer to version 2.3.4.