layui-vue Documentation

To use the component, you must register the plugin with your Vue application instance and import the required CSS styles. Ensure you have @layui/layui-vue already configured as this component depends on it.

import App from './App';
import { createApp } from 'vue';
import LayJsonSchemaForm from "@layui/json-schema-form";
import "@layui/json-schema-form/lib/index.css";

const app = createApp(App);

app.use(LayJsonSchemaForm).mount('#app');

To use Layui Vue, you must mount the plugin to your Vue application instance and import the required CSS styles.

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

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

Install the @layui/json-schema-form package using npm to add the high-level JSON schema form component to your project. This component is built on top of @layui/layui-vue form.

npm install @layui/json-schema-form --save

If you are using Volar for Vue development, you should add the Layui Vue types to your tsconfig.json to ensure global component types are correctly recognized.

// tsconfig.json
{
  "compilerOptions": {
    "types": ["@layui/layui-vue/types"]
  }
}

Install the @layui/icons-vue package using npm to use Layui iconfont icons as Vue components.

npm i @layui/icons-vue

Install the core library using npm to add Layui Vue components to your project.

npm i @layui/layui-vue

Install the @layui/layer-vue package using npm to add the web elastic layer component to your project.

npm i @layui/layer-vue

Before using the icon components, you must import the required font icon CSS files in your project entry point or component.

import "@layui/icons-vue/lib/index.css";

To use @layui/layer-vue, you must mount the plugin to your Vue application instance and import the required CSS styles. Ensure you import @layui/layer-vue/lib/index.css to apply the component styles correctly.

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

const app = createApp(App);

app.use(layer).mount('#app');

You can access the official documentation and various mirror sites for layui-vue to ensure availability and speed:

• Official Website: https://www.layui-vue.com
• Mirror 1: https://layui-vue.zhixiny.cn
• Mirror 2: https://layui-vue-awesome.pages.dev
• Version 2.x Mirror: https://layui-vue-expr.pages.dev