Registry / ui / xdesign-vue-next

xdesign-vue-next

library1.0.6jsnpmunverified

XDesign Vue Next is a Vue 3 UI component library for desktop applications, currently at v1.0.6 with steady releases. It provides high-quality components with consistent API and UI across frameworks, supports dark mode, customizable themes, and tree-shaking for optimized bundles. Key differentiators include desktop-focused interaction patterns and TypeScript support. The library targets modern browsers (Chrome 84+, Edge 84+, Firefox 83+, Safari 14.1+).

ui productivity

npm install xdesign-vue-next

package ↗

INSTALL

IMPORT

SIG · XDESIGN-VUE-NEXT

xdesign-vue-next

uijavascriptv1.0.6

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.

Button

✓ import { Button } from 'xdesign-vue-next'

✗ import Button from 'xdesign-vue-next'

Default import does not exist; must use named import for each component.

createApp

✓ import { createApp } from 'vue'

✗ import { createApp } from 'xdesign-vue-next'

createApp is from Vue itself, not from xdesign-vue-next.

Component

✓ import { Button } from 'xdesign-vue-next'; app.use(Button)

✗ import { Button } from 'xdesign-vue-next'; app.component('XButton', Button)

Use app.use() to register components globally; do not use app.component() unless targeting specific registration.

Styles

✓ import 'xdesign-vue-next/es/style/index.css'

✗ import 'xdesign-vue-next/dist/index.css'

CSS path uses es/style/index.css; avoid dist/ which may not exist or be outdated.

Installs xdesign-vue-next, imports Button component and CSS, registers globally, and mounts the app.

import { createApp } from 'vue'; import { Button } from 'xdesign-vue-next'; import 'xdesign-vue-next/es/style/index.css'; import App from './app.vue'; const app = createApp(App); app.use(Button); app.mount('#app');

Debug

Known issues

gotchaCSS must be imported separately; components won't render properly without styles.

fix

Add import 'xdesign-vue-next/es/style/index.css' to your main entry file.

affects: >=1.0.0

breakingAll component names are PascalCase (e.g., Button, Input). kebab-case registration not directly supported via app.use() without custom plugin.

fix

Use named imports exactly as documented; do not attempt to register with kebab-case names.

affects: >=1.0.0

deprecatedOpt-in to dark mode via theme config; not automatically applied.

fix

Refer to documentation to enable dark mode; no global toggle.

affects: >=1.0.0

gotchaTree-shaking works only if using ES module builds; ensure bundler is configured correctly.

fix

Use a bundler like Vite that supports ES modules and tree-shaking.

affects: >=1.0.0

Errors

Common errors & fixes

Uncaught TypeError: Cannot read properties of undefined (reading 'use')

Attempting to call app.use(Button) without first creating the app with createApp.

fix

Ensure you have const app = createApp(App); before calling app.use(Button).

Module not found: Error: Can't resolve 'xdesign-vue-next/es/style/index.css'

Incorrect path to CSS; package may be installed in a monorepo or custom location.

fix

Use the correct relative path: import 'xdesign-vue-next/es/style/index.css'; verify package is in node_modules.

[Vue warn]: Failed to resolve component: button

Using kebab-case in template (e.g., <x-button>) but component is registered as Button.

fix

Use PascalCase in template: <Button />, or register with a kebab-case alias via a custom plugin.

Uncaught Error: No matching export in 'node_modules/xdesign-vue-next/es/index.mjs' for import 'Button'

Using a bundler that does not resolve named exports properly, or importing from wrong path.

fix

Use import { Button } from 'xdesign-vue-next' and ensure bundler supports package.json exports field.

Upgrade

Version history

1.0.6latest on npm

Audit

Dependencies

vuerequiredPeer dependency: Vue 3 is required for component rendering and reactivity.

Agent activity

49 hits · last 30 days

node

OpenAI (training)

Resources

packagexdesign-vue-next ↗