@kylexd/element-extend

Element Plus extension components for Vue desktop projects.

Install

npm install @kylexd/element-extend

Exports

Main component exports include CuImage, GridImage, BaseTip, Pagination, CuAffix, EmptyData, and UploadImg.

Helper exports include imageViewer, useFullscreenLoading, and closeFullscreenLoading.

Basic Usage

<script setup lang="ts">
import { CuImage, Pagination } from '@kylexd/element-extend'
import '@kylexd/element-extend/style.css'
</script>

For Element Plus SCSS themes, compile the Element Plus styles in the consuming project:

@use './element-theme.scss' as *;
@use '@kylexd/element-extend/element-plus.scss';

Import this from a normal project style entry. Do not put it into a Sass file that is injected into every Element Plus component style.

For Tailwind v4 projects, a framework-style CSS entry is also available:

@import "tailwindcss";
@import "@kylexd/element-extend/style.css";
@import "@kylexd/element-extend/tailwind.css";

@theme {
  --color-primary: #036af1;
}

The Tailwind entry provides source scanning; the stylesheet still carries scoped component CSS. Element Plus component styles are compiled by the consuming project through the SCSS entry above. The auto-import resolver is exported from @kylexd/element-extend/resolver.

Resolver-only consumers can opt into Element Plus SCSS side effects:

KyleElementExtendResolver({ elementPlusStyle: true })

configureElementExtend is intended to run before app mount. Tests, SSR entrypoints, or multi-app hosts can call resetElementExtendConfig() before applying a fresh config.

Build

npm run build

Notes

Vue and Element Plus are peer dependencies. The package is intended for desktop UI composition and should not be mixed with Vant mobile components. Import the package stylesheet when using the components; import element-plus.scss when the host project wants Element Plus styles to follow its own SCSS theme.

License

UNLICENSED