MCL UI Framework

1.0.12 verified Mon Apr 27 auth: no javascript

A Vue 3 + TypeScript UI component library built on Element Plus, tailored for Chinese enterprise middle-backend systems. Current stable version is 1.0.12, released as an alpha-quality package with sparse documentation and no changelog. It offers layout components (header, sidebar, content), theme toggling (multiple colors, dark mode with localStorage persistence), and routing integration via meta properties. Compared to alternatives like Ant Design Vue or Naive UI, it provides a simpler API but lacks community adoption and maturity.

Common errors

error Uncaught TypeError: Cannot read properties of undefined (reading 'install') ↓

cause MclUI plugin not properly imported or vue not installed.

fix

Ensure Vue 3 is installed and import MclUI from 'mcl-ui-framework'.

error [Vue warn]: Failed to resolve component: mcl-layout ↓

cause Plugin not registered via app.use(MclUI) or component name misspelled.

fix

Call app.use(MclUI) after creating app and before mounting.

error Module not found: Error: Can't resolve 'element-plus' ↓

cause Element Plus not installed or not listed in dependencies.

fix

npm install element-plus@latest

Warnings

deprecated Package is in early alpha (1.0.x) with no stable release; API may change. ↓

fix Pin exact version and monitor repository for breaking changes.

gotcha Element Plus is a required peer dependency; not installing it will cause runtime errors. ↓

fix Run npm install element-plus@latest

gotcha Using named imports like { MclLayout } may not work; components are globally registered via plugin. ↓

fix Use app.use(MclUI) and rely on global registration.

breaking The CSS file path changed from 'dist/mcl-ui-framework.css' to something else in undocumented versions. ↓

fix Always import from 'mcl-ui-framework/dist/mcl-ui-framework.css' or check latest docs.

Install

npm install mcl-ui-framework

yarn add mcl-ui-framework

pnpm add mcl-ui-framework

Imports

MclUI
wrong
```
const MclUI = require('mcl-ui-framework')
```
correct
```
import MclUI from 'mcl-ui-framework'
```
Default import for plugin; CJS require may not work due to ESM-first packaging.

mcl-layout

wrong

import { MclLayout } from 'mcl-ui-framework'

correct

import 'mcl-ui-framework' // then use <mcl-layout> globally

Component is registered globally via plugin; named exports are not documented.

theme CSS

wrong

import 'mcl-ui-framework/styles/index.css'

correct

import 'mcl-ui-framework/dist/mcl-ui-framework.css'

CSS file path is dist/mcl-ui-framework.css; other paths may not exist.

Quickstart

Full setup: install plugin, import CSS, and use layout component with Vue Router.

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import MclUI from 'mcl-ui-framework';
import 'mcl-ui-framework/dist/mcl-ui-framework.css';

const app = createApp(App);
app.use(router);
app.use(MclUI);
app.mount('#app');

// Vue component template:
// <template>
//   <mcl-layout :routes="router.options.routes" :use-external-routes="true" :router="router">
//     <router-view />
//   </mcl-layout>
// </template>