tdesign-vue

library1.14.5jsnpmunverified

tdesign-vue is the official Vue 2.x component library from Tencent's TDesign specification. It provides a comprehensive set of high-quality UI components designed for desktop applications, featuring consistent APIs and UI across various TDesign framework libraries. The library supports dark mode, customizable themes, and tree-shaking for optimized bundle sizes. Currently at version 1.14.5, it observes a frequent release cadence with regular bug fixes and feature additions. Key differentiators include its backing by Tencent, enterprise-grade component suite, and robust TypeScript support, making it suitable for large-scale business applications targeting Vue 2 environments. It is distinct from `tdesign-vue-next`, which targets Vue 3.x.

web-framework crm-productivity

npm install tdesign-vue

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · TDESIGN-VUE

tdesign-vue

web-frameworkjavascriptv1.14.5

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.

TDesign

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

✗ const TDesign = require('tdesign-vue');

Imports and globally registers all TDesign components and global styles for Vue 2 applications. This is a common setup for full library usage.

Button

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

✗ import Button from 'tdesign-vue/lib/button';

For tree-shaking and on-demand component loading, import individual components as named exports directly from 'tdesign-vue'. This is the recommended approach for specific component usage.

TButtonProps

✓ import type { ButtonProps as TButtonProps } from 'tdesign-vue';

The library ships with TypeScript types. Use type imports for component props or other utility types for enhanced type safety in TypeScript projects.

This quickstart demonstrates how to globally import and register TDesign Vue components and styles, then use a `TButton` and `TDatePicker` in a basic Vue 2 application.

import Vue from 'vue'; import TDesign from 'tdesign-vue'; import 'tdesign-vue/es/style/index.css'; // Import specific component styles if needed, or rely on global styles // import 'tdesign-vue/es/button/style/index.css'; Vue.use(TDesign); new Vue({ el: '#app', template: ` <div id="app"> <t-space direction="vertical"> <h1>TDesign Vue Quickstart</h1> <t-button theme="primary" @click="handleClick">Hello TDesign!</t-button> <t-date-picker /> </t-space> </div> `, methods: { handleClick() { this.$alert('Button Clicked!', 'Info'); } } });

Debug

Known issues

breakingThe `tdesign-icons-vue` dependency, which provides icons for `tdesign-vue`, underwent significant changes in version 0.4.x (released with `tdesign-vue` 1.14.0). Several icons, specifically `video-camera-3`, `video-camera-3-filled`, and `list`, were removed.

fix

Review your application for usage of the removed icons. Update your icon references to available alternatives or remove them. Consult the `tdesign-icons-vue` documentation for the latest icon set.

affects: >=1.14.0

breakingThe `ColorPicker` component in `tdesign-vue` 1.12.0 introduced changes to its gradient mode and removed the `HSB` format. Businesses relying on the `ColorPicker`'s gradient functionality or the `HSB` color format should be aware of these breaking changes.

fix

For `ColorPicker` users, verify your implementation if using gradient mode or the `HSB` format. Adjust your color format conversions to `HEX8` or other supported formats as necessary. Refer to the `ColorPicker` documentation for updated API details.

affects: >=1.12.0

deprecatedThe `Alert` component's `close` API was deprecated in favor of `closeBtn` in version 1.13.0. The `close` prop will be removed in a future major version.

fix

Migrate your `Alert` component usage from the `close` prop to `closeBtn` to ensure future compatibility. For example, change `<t-alert close />` to `<t-alert closeBtn />`.

affects: >=1.13.0

gotchaThis library (`tdesign-vue`) is specifically built for Vue 2.x. It is not directly compatible with Vue 3.x applications. Attempting to use it in a Vue 3 project will lead to runtime errors or unexpected behavior, as `tdesign-vue-next` is the dedicated Vue 3 version.

fix

Ensure your project is running Vue 2.x. If you are developing for Vue 3.x, use `tdesign-vue-next` instead. If migrating a Vue 2 project using `tdesign-vue` to Vue 3, a full migration to `tdesign-vue-next` or careful use of Vue 3's compatibility build (`@vue/compat`) would be required, though direct `tdesign-vue` integration with `@vue/compat` is not officially supported by TDesign.

affects: all

Errors

Common errors & fixes

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

TDesign components were not properly registered with the Vue application, or styles were not imported, leading to rendering issues.

fix

Ensure you have `import Vue from 'vue'; import TDesign from 'tdesign-vue'; import 'tdesign-vue/es/style/index.css'; Vue.use(TDesign);` in your main application entry file (e.g., `main.js`). If using individual imports, make sure each component is imported and registered (either globally or in the component's `components` option).

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

The main CSS file for TDesign Vue is missing or the import path is incorrect. This can happen if the package is not installed correctly or the build tool cannot locate the stylesheet.

fix

Verify that `tdesign-vue` is correctly installed (`npm install tdesign-vue`) and ensure the import path `import 'tdesign-vue/es/style/index.css';` is correct in your main application entry point. Also, check your build configuration (e.g., Webpack, Vite) for CSS loading.

Property 'alert' does not exist on type 'Vue'.

This TypeScript error occurs when a TDesign plugin method, like `$alert`, is accessed on the Vue instance (`this`) but the TypeScript compiler does not know about it. This is usually due to missing or incorrect global type declarations.

fix

Ensure that TDesign's global type declarations are included in your TypeScript configuration. For `tdesign-vue`, you might need to add `node_modules/tdesign-vue/global.d.ts` to your `tsconfig.json`'s `include` array or create a custom `d.ts` file to augment the `Vue` interface if auto-detection fails.

Upgrade

Version history

1.14.5latest on npm

Audit

Dependencies

vuerequiredPeer dependency for Vue 2.x framework integration.

Agent activity

61 hits · last 30 days

node

OpenAI (training)

Resources

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

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

homepagehttps://tdesign.tencent.com ↗