Registry / web-framework / tdesign-vue-next

tdesign-vue-next

library1.19.1jsnpmunverified

TDesign Vue Next is a comprehensive UI component library specifically designed for Vue 3 and desktop applications. It offers a rich set of high-quality components, maintaining a consistent API and UI experience across the TDesign ecosystem for various frameworks. The library supports modern features such as dark mode, customizable themes, and efficient tree-shaking to optimize bundle sizes. Currently at version 1.19.1, it follows an active release cadence, frequently delivering bug fixes, performance improvements, and new features, often on a weekly or bi-weekly basis, as evidenced by its recent changelog. It emphasizes desktop interaction patterns and provides robust TypeScript types for an enhanced developer experience, making it a suitable choice for large-scale enterprise applications.

web-framework

npm install tdesign-vue-next

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · TDESIGN-VUE-NEXT

tdesign-vue-next

web-frameworkjavascriptv1.19.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

Button (Named Import)

✓ import { Button } from 'tdesign-vue-next';

✗ import Button from 'tdesign-vue-next';

Most TDesign components are individual named exports for effective tree-shaking. Default imports are incorrect for components.

Global TDesign plugin

✓ import TDesign from 'tdesign-vue-next'; import 'tdesign-vue-next/es/style/index.css'; createApp(App).use(TDesign);

✗ import { TDesign } from 'tdesign-vue-next';

The global TDesign plugin (for full installation) is a default export. Ensure you also import the base stylesheet.

CSS Styles

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

✗ import 'tdesign-vue-next/dist/tdesign.css';

For modern module bundlers and ESM-first environments, `es/style/index.css` is the recommended path. The `dist` path is typically for CJS/UMD builds.

TypeScript Types (e.g., InputProps)

✓ import type { InputProps } from 'tdesign-vue-next';

TDesign Vue Next ships with comprehensive TypeScript definitions, allowing for strong typing of component props, events, and slots.

This example demonstrates how to import and use individual TDesign Vue Next components (Button, Space, Input) and their essential global styles within a Vue 3 application. It also includes a basic interaction with the Message plugin.

import { createApp, defineComponent } from 'vue'; import { Button, Space, Input, Message } from 'tdesign-vue-next'; import 'tdesign-vue-next/es/style/index.css'; const App = defineComponent({ template: ` <div style="padding: 20px;"> <h1>TDesign Vue Next Quickstart</h1> <Space> <Button theme="primary" @click="showMessage">Primary Button</Button> <Button theme="default">Default Button</Button> <Input placeholder="Enter text" /> </Space> <p style="margin-top: 20px;"> This demonstrates importing individual components and the global stylesheet. For full installation, you can 'app.use(TDesign)' after importing TDesign. </p> </div> `, components: { Button, Space, Input }, methods: { showMessage() { Message.info('Hello from TDesign!'); } } }); const app = createApp(App); // If you want to use plugins like Message directly without component import: // import TDesign from 'tdesign-vue-next'; // app.use(TDesign); app.mount('#app');

Debug

Known issues

breakingThe `HeadMenu` component in version 1.19.0 introduced an automatic collapse feature for horizontal menus with excessive items. This behavioral change may affect existing layouts or require adjustments in applications with many top-level menu items.

fix

Review `HeadMenu` usage in applications with many horizontal menu items and adjust layouts or configurations if the new auto-collapse behavior is undesirable or causes regressions.

affects: >=1.19.0

breakingVersion 1.19.0 introduced a regression in the `Menu` component, causing rendering exceptions in certain scenarios. This bug was subsequently fixed in version 1.19.1.

fix

Upgrade to `tdesign-vue-next@1.19.1` or later to resolve the `Menu` rendering issues introduced in 1.19.0.

affects: 1.19.0

gotchaThe `RadioGroup` component's new `direction` API (introduced in v1.19.0) for vertical alignment currently only takes full effect when the `theme` property is set to `radio`.

fix

When using the `direction` API on `RadioGroup` for vertical layout, ensure that the `theme` prop is explicitly set to `radio` for consistent behavior.

affects: >=1.19.0

gotchaTDesign Vue Next requires Node.js version 18 or higher for its development and build environments. Using older Node.js versions may lead to build failures or unexpected behavior.

fix

Ensure your development environment uses Node.js version 18 or later. You can use a tool like NVM (Node Version Manager) to switch Node.js versions.

affects: <=1.x

Errors

Common errors & fixes

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

The global TDesign stylesheet is not found at the specified path, often due to a typo or incorrect import path for ESM builds.

fix

Ensure the CSS import path is correct: `import 'tdesign-vue-next/es/style/index.css';` for ESM-based projects.

[Vue warn]: Failed to resolve component: t-button

A TDesign component (e.g., Button, referred to as `<t-button>`) is used in a Vue template but has not been globally registered or locally imported/registered within the component using it.

fix

Either import and register the component locally (`components: { Button }`) or globally install the TDesign plugin: `import TDesign from 'tdesign-vue-next'; createApp(App).use(TDesign);`.

Property 'value' does not exist on type 'VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<LooseRequired<Readonly<{} & Omit<...>>>>'.

Using a component prop with an incorrect type or a prop that doesn't exist according to the component's TypeScript definition.

fix

Refer to the TDesign documentation for the correct prop names and types for the specific component. Ensure your TypeScript configuration is correctly inferring types for TDesign components.

Upgrade

Version history

1.19.1latest on npm

Audit

Dependencies

vuerequiredPeer dependency for any Vue 3 application using TDesign Vue Next components.

noderequiredRuntime environment requirement for development tools and build processes.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/Tencent/tdesign-vue-next ↗

packagehttps://www.npmjs.com/package/tdesign-vue-next ↗

homepagehttps://tdesign.tencent.com ↗