@kylexd/vant-extend

Extended Vant components for Vue mobile interfaces.

Overview

This package contains a small set of components built on top of Vant. It is intended for mobile pages, WebView pages, and compact Vue interfaces that already use Vant.

Install

npm install @kylexd/vant-extend

Vant and Vue are expected to be available in the consuming project.

Exports

Main components:

• CuPopup
• CuFloatingPanel
• CuSelect
• InputNumber
• BaseTip
• CuEmpty
• CuImage
• GridImage
• ViewportBottomLoad
• Headroom
• SafeBottom
• SortGroup
• SortItem
• SelectDateRange

Basic Usage

import { CuPopup, InputNumber } from '@kylexd/vant-extend'
import '@kylexd/vant-extend/style.css'

<CuPopup v-model:show="visible" title="Options">
  <div>Content</div>
</CuPopup>

For Tailwind v4 projects, the package also exposes a framework-style CSS entry:

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

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

The Tailwind entry provides source scanning; the stylesheet still carries Vant and scoped component CSS. An auto-import resolver is available from @kylexd/vant-extend/resolver.

When using the resolver, importStyle: 'compiled' imports only @kylexd/vant-extend/style.css. Projects that rely on Tailwind utility generation from package components should use importStyle: 'tailwind' or keep the explicit @kylexd/vant-extend/tailwind.css import.

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

Build

npm run build

Notes

Some components depend on Vant overlays, popups, fields, calendars, or icons. VueUse and Day.js are also peer dependencies. Import the package stylesheet when using the components.

License

UNLICENSED