{"id":15243,"library":"tdesign-vue","title":"TDesign Vue 2.x UI Library","description":"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.","status":"active","version":"1.14.5","language":"javascript","source_language":"en","source_url":"https://github.com/Tencent/tdesign-vue","tags":["javascript","vue","tdesign","typescript"],"install":[{"cmd":"npm install tdesign-vue","lang":"bash","label":"npm"},{"cmd":"yarn add tdesign-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add tdesign-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue 2.x framework integration.","package":"vue","optional":false}],"imports":[{"note":"Imports and globally registers all TDesign components and global styles for Vue 2 applications. This is a common setup for full library usage.","wrong":"const TDesign = require('tdesign-vue');","symbol":"TDesign","correct":"import Vue from 'vue';\nimport TDesign from 'tdesign-vue';\nimport 'tdesign-vue/es/style/index.css';\n\nVue.use(TDesign);"},{"note":"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.","wrong":"import Button from 'tdesign-vue/lib/button';","symbol":"Button","correct":"import { Button } from 'tdesign-vue';"},{"note":"The library ships with TypeScript types. Use type imports for component props or other utility types for enhanced type safety in TypeScript projects.","symbol":"TButtonProps","correct":"import type { ButtonProps as TButtonProps } from 'tdesign-vue';"}],"quickstart":{"code":"import Vue from 'vue';\nimport TDesign from 'tdesign-vue';\nimport 'tdesign-vue/es/style/index.css';\n\n// Import specific component styles if needed, or rely on global styles\n// import 'tdesign-vue/es/button/style/index.css';\n\nVue.use(TDesign);\n\nnew Vue({\n  el: '#app',\n  template: `\n    <div id=\"app\">\n      <t-space direction=\"vertical\">\n        <h1>TDesign Vue Quickstart</h1>\n        <t-button theme=\"primary\" @click=\"handleClick\">Hello TDesign!</t-button>\n        <t-date-picker />\n      </t-space>\n    </div>\n  `,\n  methods: {\n    handleClick() {\n      this.$alert('Button Clicked!', 'Info');\n    }\n  }\n});","lang":"javascript","description":"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."},"warnings":[{"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.","message":"The `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.","severity":"breaking","affected_versions":">=1.14.0"},{"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.","message":"The `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.","severity":"breaking","affected_versions":">=1.12.0"},{"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 />`.","message":"The `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.","severity":"deprecated","affected_versions":">=1.13.0"},{"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.","message":"This 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.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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).","cause":"TDesign components were not properly registered with the Vue application, or styles were not imported, leading to rendering issues.","error":"[Vue warn]: Unknown custom element: <t-button> - did you register the component correctly?"},{"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.","cause":"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.","error":"Module not found: Error: Can't resolve 'tdesign-vue/es/style/index.css'"},{"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.","cause":"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.","error":"Property 'alert' does not exist on type 'Vue'."}],"ecosystem":"npm"}