vant-sku

library1.0.19jsnpmunverified

Vant Sku is a Vue 3 component for displaying product SKU (Stock Keeping Unit) selection in e-commerce applications. Version 1.0.19 is the latest stable release. It is a migration from the Vant 2.x SKU component, providing similar functionality for Vue 3 environments. Key differentiators include support for custom stepper, slot-based customization, and extensive props for controlling stock, quota, and messages. It requires Vue 3 and is not compatible with Vue 2.

ecommerce

npm install vant-sku

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VANT-SKU

vant-sku

ecommercejavascriptv1.0.19

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VanSku

✓ import VanSku from 'vant-sku'

✗ import { VanSku } from 'vant-sku'

VanSku is the default export, not a named export.

Sku component

✓ <VanSku v-model="show" :sku="skuData" :goods="goodsData" />

✗ <sku v-model="show" :sku="skuData" :goods="goodsData" />

The component registers as 'van-sku' globally, but when imported locally, use the VanSku variable.

Types

✓ import type { Sku, Goods, SkuData } from 'vant-sku'

✗ import { Sku, Goods, SkuData } from 'vant-sku'

Types are exported as named exports, but only TypeScript uses them. They are not runtime values.

Shows how to set up VanSku component in a Vue 3 app with SKU data and event handlers.

import { createApp, ref } from 'vue'; import VanSku from 'vant-sku'; import 'vant-sku/dist/index.css'; const app = createApp({ setup() { const show = ref(false); const skuData = { tree: [ { k: '颜色', v: [ { id: '1', name: '红色', imgUrl: 'https://img.yzcdn.cn/1.jpg' }, { id: '2', name: '蓝色', imgUrl: 'https://img.yzcdn.cn/2.jpg' }, ], k_s: 's1', }, ], list: [ { id: 12345, s1: '1', price: 100, stock_num: 20 }, { id: 12346, s1: '2', price: 120, stock_num: 10 }, ], price: '100', stock_num: 30, none_sku: false, hide_stock: false, }; const goodsData = { title: '测试商品', picture: 'https://img.yzcdn.cn/1.jpg', }; return { show, skuData, goodsData }; }, template: ` <div> <van-button type="primary" @click="show = true">打开SKU</van-button> <van-sku v-model="show" :sku="skuData" :goods="goodsData" :goods-id="'12345'" :quota="0" :quota-used="0" :hide-stock="skuData.hide_stock" @buy-clicked="onBuyClicked" @add-cart="onAddCartClicked" /> </div> `, methods: { onBuyClicked() { console.log('buy clicked'); }, onAddCartClicked() { console.log('add cart clicked'); }, }, }); app.use(VanSku); app.mount('#app');

Debug

Known issues

breakingVant Sku 1.0.0 removed the 'messageConfig' prop. Use 'message-config' instead, but note that the configuration structure may differ.

fix

Replace messageConfig prop with message-config following the new schema. Refer to vant 2.x docs for the old structure but adapt to Vue 3.

affects: >=1.0.0

gotchaThe package is not compatible with Vue 2. Attempting to use it with Vue 2 will cause runtime errors.

fix

Ensure your project uses Vue 3. If on Vue 2, use the original vant 2.x version of sku.

affects: >=1.0.0

deprecatedThe 'stepper-title' prop is replaced by 'stepper-title' in vant-sku but the old 'stepper-title' from vant 2 still works. However, it may be removed in future versions.

fix

Use 'stepper-title' prop as documented. No immediate action needed but prepare for removal.

affects: >=1.0.0

gotchaCSS must be imported separately: import 'vant-sku/dist/index.css'. Failure to do so results in unstyled component.

fix

Add the CSS import to your entry file.

affects: >=1.0.0

gotchaThe component relies on Vant's Button and Popup components. If not using Vant globally, you need to import those separately or the component may fail to render correctly.

fix

Install and import Vant UI library, or ensure that the required components are available.

affects: >=1.0.0

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'vant-sku'

Package not installed or import path incorrect.

fix

Run 'npm install vant-sku' and ensure import is 'import VanSku from 'vant-sku''.

[Vue warn]: Unknown custom element: <van-sku> - did you register the component correctly?

The component is not registered globally or locally.

fix

Use 'app.use(VanSku)' for global registration, or include it in components option for local registration.

TypeError: Cannot read properties of undefined (reading 'sku')

The 'sku' prop is not provided or is undefined.

fix

Ensure you pass a valid sku object to the :sku prop.

Upgrade

Version history

1.0.19latest on npm

Audit

Dependencies

vuerequiredVue 3 is required to use this component.

vantoptionalDepends on Vant UI library for base components like Button.

Agent activity

38 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/lixiaofa/vant-sku ↗

packagevant-sku ↗

homepagehttps://github.com/lixiaofa/vant-sku ↗