{"id":12125,"library":"tdesign-mobile-vue","title":"TDesign Mobile Vue 3 UI Library","description":"TDesign Mobile Vue is a comprehensive UI component library specifically designed for Vue 3 and mobile web applications. Currently stable at version 1.13.2, the library maintains a frequent release cadence with regular minor and patch updates, often several per month, introducing new features, bug fixes, and performance enhancements. It is part of the broader TDesign enterprise design system, ensuring consistent API and UI/UX across various frameworks like React and WeChat MiniProgram. Key differentiators include its focus on mobile-first interactions, high-quality components, dark mode support, extensive theme customization options, and built-in tree-shaking support for optimized bundle sizes. It ships with TypeScript types for improved developer experience and type safety.","status":"active","version":"1.13.2","language":"javascript","source_language":"en","source_url":"https://github.com/Tencent/tdesign-mobile-vue","tags":["javascript","vue","mobile","tdesign","typescript"],"install":[{"cmd":"npm install tdesign-mobile-vue","lang":"bash","label":"npm"},{"cmd":"yarn add tdesign-mobile-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add tdesign-mobile-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency for all Vue 3 applications using this library.","package":"vue","optional":false}],"imports":[{"note":"This is the recommended way to import and globally register all TDesign components for a Vue 3 application. TDesign Mobile Vue is ESM-first.","wrong":"const TDesign = require('tdesign-mobile-vue');","symbol":"TDesign","correct":"import TDesign from 'tdesign-mobile-vue';"},{"note":"For tree-shaking and on-demand component loading, import individual components as named exports. No extra setup is typically needed with modern build tools. This also applies to other components like `Dialog`, `ActionSheet`, etc.","wrong":"import Button from 'tdesign-mobile-vue/lib/button';","symbol":"Button","correct":"import { Button } from 'tdesign-mobile-vue';"},{"note":"Since v1.13.0, ActionSheet's functional API is separated and exported as `ActionSheetPlugin`. Other plugins might follow similar patterns. The component itself is still imported as `{ ActionSheet }`.","wrong":"import { ActionSheet } from 'tdesign-mobile-vue'; // Then try to use as function","symbol":"ActionSheetPlugin","correct":"import { ActionSheetPlugin } from 'tdesign-mobile-vue';"},{"note":"The library ships with TypeScript types. Use type imports for props or other utility types.","symbol":"types","correct":"import type { ButtonProps } from 'tdesign-mobile-vue';"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport TDesign, { Button, Toast } from 'tdesign-mobile-vue';\nimport 'tdesign-mobile-vue/es/style/index.css'; // Import global styles\n\nconst App = {\n  setup() {\n    const showToast = () => {\n      Toast.info('This is a toast message!');\n    };\n    return { showToast };\n  },\n  template: `\n    <div style=\"padding: 20px;\">\n      <h1>TDesign Mobile Vue Quickstart</h1>\n      <t-button block @click=\"showToast\">Show Toast</t-button>\n      <t-button block variant=\"outline\" style=\"margin-top: 10px;\">Outline Button</t-button>\n      <p style=\"margin-top: 20px; font-size: 14px; color: #666;\">\n        This example demonstrates global registration, individual component usage, and a functional API.\n      </p>\n    </div>\n  `,\n};\n\nconst app = createApp(App);\napp.use(TDesign); // Globally registers all TDesign components\napp.mount('#app');","lang":"typescript","description":"Sets up a basic Vue 3 application, registers TDesign globally, and demonstrates a TDesign Button component and a functional Toast API."},"warnings":[{"fix":"For the functional API, import `ActionSheetPlugin` (e.g., `import { ActionSheetPlugin } from 'tdesign-mobile-vue';`). For the component, continue to import `ActionSheet`.","message":"The export method for `ActionSheet` was adjusted in v1.13.0. The component and its functional API are now separated.","severity":"breaking","affected_versions":">=1.13.0"},{"fix":"Review existing icon usage for removed icons. Replace them with available alternatives or update your `tdesign-icons-vue-next` dependency if you are using specific icon versions.","message":"In v1.11.0, several icons were removed from the `Icon` component (`video-camera-3`, `video-camera-3-filled`, `list`). New icons were also added.","severity":"breaking","affected_versions":">=1.11.0"},{"fix":"Ensure `CheckboxGroup`'s `value` prop is initialized with an array (e.g., `[]`) or `null` if you wish to strictly control its initial state, rather than relying on `undefined`.","message":"In v1.10.0, the `CheckboxGroup` component changed its behavior when `value` is `undefined`. It will no longer warn and instead implicitly convert the data to an `Array` upon user selection.","severity":"gotcha","affected_versions":">=1.10.0"},{"fix":"If supporting older browsers is critical, consider polyfills or alternative UI libraries. Always verify browser support matrix before deployment.","message":"The library primarily supports modern browsers. Ensure your target browser versions meet the minimum requirements (e.g., Edge >=97, Firefox >=96, Chrome >=96, Safari >=14.1).","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Functional APIs are typically called programmatically (e.g., `ActionSheetPlugin.show()`) and are not meant to be rendered directly as `<t-action-sheet-plugin>`. Use `<t-action-sheet>` for the component.","cause":"Attempting to use a functional API (like `ActionSheetPlugin`) as a Vue component in the template.","error":"Error: A component name can only contain alphanumeric characters or dashes, but got 't-ActionSheetPlugin'."},{"fix":"Ensure you have `import TDesign from 'tdesign-mobile-vue';` and `app.use(TDesign);` in your main application entry file (e.g., `main.ts` or `main.js`). If using individual imports, make sure each component is imported and used correctly.","cause":"TDesign components were not properly registered with the Vue application.","error":"Failed to resolve component: t-button. If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement."},{"fix":"Verify that `tdesign-mobile-vue` is correctly installed (`npm install tdesign-mobile-vue`) and ensure the import path `import 'tdesign-mobile-vue/es/style/index.css';` is correct for the global styles. For component-specific styles, check the documentation.","cause":"The main CSS file for TDesign Mobile Vue is missing or the import path is incorrect.","error":"Module not found: Error: Can't resolve 'tdesign-mobile-vue/es/style/index.css'"}],"ecosystem":"npm"}