Quick Start

Installation

ez-ui is published on the private registry (package name ez-ui) — switch your npm registry to the private one before installing (nrm is recommended for managing registries). A mirror package @maxtan/ez-ui is also published on the public npm registry.

It is recommended to use pnpm as your package manager. The library depends on element-plus.

# private registry (switch your registry first)
pnpm add element-plus ez-ui

# public registry
pnpm add element-plus @maxtan/ez-ui

The examples below use the private package name ez-ui; replace it with @maxtan/ez-ui in import paths if you installed from the public registry.

Usage

Import styles in the entry file and configure the element-plus language via el-config-provider.

App.vue

<template>
  <el-config-provider :locale="zhCn">...</el-config-provider>
</template>
<script setup lang="ts">
import 'element-plus/dist/index.css'
import 'ez-ui/dist/index.css'
import { zhCn } from 'element-plus/es/locale/lang/zh-cn'
</script>

Full Registration

Install ez-ui in the entry file to register all Ez components at once.

main.ts

import { createApp } from 'vue'
import EzUI from 'ez-ui'
import App from './App.vue'

const app = createApp(App)
app.use(EzUI)

On-Demand Import

Import components directly where they are used, no global registration required.

demo.vue

<template>
  <div>
    <el-button type="primary" @click="flag = !flag">Dialog</el-button>
    <ez-dialog v-model="flag">
      <div>dialog content</div>
    </ez-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { EzDialog } from 'ez-ui'
const flag = ref(false)
</script>

Internationalization (optional)

Built-in component texts (query, reset, upload hints, etc.) use snowflake keys from the common translation system. When the host app provides no translation for a key, the component automatically falls back to its built-in Chinese text — with no i18n configuration at all, the UI still renders complete Chinese.

To switch languages, merge the snowflake-key entries exported from the common translation system into the locale of el-config-provider:

App.vue

<template>
  <el-config-provider :locale="locale">...</el-config-provider>
</template>
<script setup lang="ts">
import { en } from 'element-plus/es/locale/lang/en'
// Entries exported from the common translation system (snowflake key → translation)
const locale = {
  ...en,
  'i1998318595301830658': 'Query', // 查询
  'i1998318602172100610': 'Reset' // 重置
}
</script>

Placeholders use the {v0} form. For example, the size-limit entry 'i2018934089621774338': 'Upload file size cannot exceed {v0} MB!' is automatically rendered with the actual value passed by the component.