TDesign Vue Next

1.19.1 · active · verified Sun Apr 19

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.

Common errors

```
Module not found: Error: Can't resolve 'tdesign-vue-next/es/style/index.css'
```
cause 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
```
cause 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<...>>>>'.
```
cause 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.

Warnings

breaking The `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.
breaking Version 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.
gotcha The `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.
gotcha TDesign 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.

Install

npm install tdesign-vue-next npm
yarn add tdesign-vue-next yarn
pnpm add tdesign-vue-next pnpm

Imports

Button (Named Import)
wrong:
```
import Button from 'tdesign-vue-next';
```
correct:
```
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

wrong:

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

correct:

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

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

CSS Styles
wrong:
```
import 'tdesign-vue-next/dist/tdesign.css';
```
correct:
```
import 'tdesign-vue-next/es/style/index.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.

Quickstart

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');

view raw JSON →