Getting Started with Layui‑Vue: A Vue 3 Desktop Component Library

Vue 3.0 desktop component library, another presentation style of Layui.

Quick Start

To get layui-vue , you only need to install the package with npm:

npm install @layui/layui-vue

In main.ts :

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')

Here is a basic starter page:

<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>

Read the Documentation

From now on, embrace Layui in a new way. May it become your long‑term development companion, turning into millions of bytes on your screen!

Changelog

[New] avatar component fullback attribute – callback when image fails to load. [New] avatar component auto-fix-size attribute – automatically adjust icon and font size. [New] avatar‑list component size attribute – unified size for avatars in slots. [New] avatar‑list component radius attribute – unified radius for avatars in slots. [New] badge component position attribute – options: top‑right, top‑left, bottom‑right, bottom‑left. [New] badge component showZero attribute – whether to display when value is 0. [New] badge component max attribute – set maximum threshold for value. [New] badge component badgeStyle attribute – customize badge style. [New] badge component custom slot. [New] badge component Jest test cases.

Found this article helpful? Liking and sharing is the greatest support!