{"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,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","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"}