{"id":12126,"library":"tdesign-vue-next","title":"TDesign Vue Next","description":"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.","status":"active","version":"1.19.1","language":"javascript","source_language":"en","source_url":"https://github.com/Tencent/tdesign-vue-next","tags":["javascript","vue","vue3","vue-next","tdesign","typescript"],"install":[{"cmd":"npm install tdesign-vue-next","lang":"bash","label":"npm"},{"cmd":"yarn add tdesign-vue-next","lang":"bash","label":"yarn"},{"cmd":"pnpm add tdesign-vue-next","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for any Vue 3 application using TDesign Vue Next components.","package":"vue","optional":false},{"reason":"Runtime environment requirement for development tools and build processes.","package":"node","optional":false}],"imports":[{"note":"Most TDesign components are individual named exports for effective tree-shaking. Default imports are incorrect for components.","wrong":"import Button from 'tdesign-vue-next';","symbol":"Button (Named Import)","correct":"import { Button } from 'tdesign-vue-next';"},{"note":"The global TDesign plugin (for full installation) is a default export. Ensure you also import the base stylesheet.","wrong":"import { TDesign } from 'tdesign-vue-next';","symbol":"Global TDesign plugin","correct":"import TDesign from 'tdesign-vue-next';\nimport 'tdesign-vue-next/es/style/index.css';\ncreateApp(App).use(TDesign);"},{"note":"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.","wrong":"import 'tdesign-vue-next/dist/tdesign.css';","symbol":"CSS Styles","correct":"import 'tdesign-vue-next/es/style/index.css';"},{"note":"TDesign Vue Next ships with comprehensive TypeScript definitions, allowing for strong typing of component props, events, and slots.","symbol":"TypeScript Types (e.g., InputProps)","correct":"import type { InputProps } from 'tdesign-vue-next';"}],"quickstart":{"code":"import { createApp, defineComponent } from 'vue';\nimport { Button, Space, Input, Message } from 'tdesign-vue-next';\nimport 'tdesign-vue-next/es/style/index.css';\n\nconst App = defineComponent({\n  template: `\n    <div style=\"padding: 20px;\">\n      <h1>TDesign Vue Next Quickstart</h1>\n      <Space>\n        <Button theme=\"primary\" @click=\"showMessage\">Primary Button</Button>\n        <Button theme=\"default\">Default Button</Button>\n        <Input placeholder=\"Enter text\" />\n      </Space>\n      <p style=\"margin-top: 20px;\">\n        This demonstrates importing individual components and the global stylesheet.\n        For full installation, you can 'app.use(TDesign)' after importing TDesign.\n      </p>\n    </div>\n  `,\n  components: { Button, Space, Input },\n  methods: {\n    showMessage() {\n      Message.info('Hello from TDesign!');\n    }\n  }\n});\n\nconst app = createApp(App);\n// If you want to use plugins like Message directly without component import:\n// import TDesign from 'tdesign-vue-next';\n// app.use(TDesign);\napp.mount('#app');\n","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=1.19.0"},{"fix":"Upgrade to `tdesign-vue-next@1.19.1` or later to resolve the `Menu` rendering issues introduced in 1.19.0.","message":"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.","severity":"breaking","affected_versions":"1.19.0"},{"fix":"When using the `direction` API on `RadioGroup` for vertical layout, ensure that the `theme` prop is explicitly set to `radio` for consistent behavior.","message":"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`.","severity":"gotcha","affected_versions":">=1.19.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":"<=1.x"}],"env_vars":null,"search_vec":"'1.19.1':68 '3':17 'across':38 'activ':72 'api':34 'applic':20,124 'basi':92 'bi':90 'bi-week':89 'bug':77 'bundl':63 'cadenc':74 'changelog':98 'choic':118 'compon':11,30 'comprehens':9 'consist':33 'current':65 'customiz':54 'dark':52 'deliv':76 'design':14 'desktop':19,101 'develop':112 'ecosystem':41 'effici':57 'emphas':100 'enhanc':111 'enterpris':123 'evidenc':94 'experi':37,113 'featur':49,83 'fix':78 'follow':70 'framework':44 'frequent':75 'high':28 'high-qual':27 'improv':80 'interact':102 'javascript':125 'larg':121 'large-scal':120 'librari':12,46 'maintain':31 'make':114 'mode':53 'modern':48 'new':82 'next':3,6,130 'offer':22 'often':84 'optim':62 'pattern':103 'perform':79 'provid':105 'qualiti':29 'recent':97 'releas':73 'rich':24 'robust':106 'scale':122 'set':25 'shake':60 'size':64 'specif':13 'suitabl':117 'support':47 'tdesign':1,4,40,131 'theme':55 'tree':59 'tree-shak':58 'type':108 'typescript':107,132 'ui':10,36 'various':43 'version':67 'vue':2,5,16,126,129 'vue-next':128 'vue3':127 'week':87,91","created_at":"2026-04-19T13:41:33.331892+00:00","updated_at":"2026-04-19T13:41:33.331892+00:00","problems":[{"fix":"Ensure the CSS import path is correct: `import 'tdesign-vue-next/es/style/index.css';` for ESM-based projects.","cause":"The global TDesign stylesheet is not found at the specified path, often due to a typo or incorrect import path for ESM builds.","error":"Module not found: Error: Can't resolve 'tdesign-vue-next/es/style/index.css'"},{"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);`.","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.","error":"[Vue warn]: Failed to resolve component: t-button"},{"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.","cause":"Using a component prop with an incorrect type or a prop that doesn't exist according to the component's TypeScript definition.","error":"Property 'value' does not exist on type 'VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<LooseRequired<Readonly<{} & Omit<...>>>>'."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://tdesign.tencent.com","github":"https://github.com/Tencent/tdesign-vue-next","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/tdesign-vue-next","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}