Getting Started with Layui‑Vue: Installation, Basic Layout, and Changelog

This article introduces the Layui‑Vue component library for Vue 3, showing how to install it via npm, configure it in a main.ts file, create a basic layout page, and review the latest bug fixes and optimizations.

Laravel Tech Community
Laravel Tech Community
Laravel Tech Community
Getting Started with Layui‑Vue: Installation, Basic Layout, and Changelog

Software Introduction

A desktop component library for Vue 3.0, offering an alternative presentation style for Layui.

Quick Start

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

This 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 and continue to serve you on the screen.

Changelog

[Fix] treeSelect component placeholder ineffective when multiple is true. [Improve] popconfirm component content slot optional when content is provided. [Improve] empty component uses flex layout for centered adaptive content. [Improve] input component background color set to #ffffff. [Improve] page component execution order of update:modelValue and change events. [Improve] date-picker component range selection mode adjustments.

Original Source

Signed-in readers can open the original source through BestHub's protected redirect.

Sign in to view source
Republication Notice

This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactadmin@besthub.devand we will review it promptly.

VueInstallationUI componentslayui-vue
Laravel Tech Community
Written by

Laravel Tech Community

Specializing in Laravel development, we continuously publish fresh content and grow alongside the elegant, stable Laravel framework.

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.