# tdesign-vue-next-starter: a Vue 3 admin skeleton for TDesign > The tdesign-vue-next-starter repository is a starter kit for building an admin interface on Tencent's TDesign Vue Next components, with Vite, Pinia, TypeScript, dark mode, several layout variants, a mock data layer and a CLI that generates the project. It suits a developer who needs a working admin shell rather than a component set, and the choice is TDesign rather than an unstyled approach. **Tencent/tdesign-vue-next-starter** — A starter-kit for TDesign Vue Next UI components - Repository: https://github.com/Tencent/tdesign-vue-next-starter - Website: https://tdesign.tencent.com/starter/vue-next/ - Stars: 1,039 · Forks: 249 - Language: Vue - License: MIT - Published: 2026-10-19 · Updated: 2026-10-19 · Language: en - Canonical page: https://hysenlabs.com/projects/tencent-tdesign-vue-next-starter ## What the starter is, and who it is for TDesign Vue Next Starter is a starter kit for TDesign Vue Next UI components, and the description is that it is TDesign-based, developed with Vue 3, Vite, Pinia and TypeScript. It offers customisable theme configuration, and it aims to provide a project out of the box, a configuration-style middle and background project, which is the Chinese phrase for an admin and back-office application. The features list spells out what you get. Various provided pages for development, a complete directory structure, code specification configuration, dark mode support, custom theme colours, various space layouts, and a mock data scheme. The primary language is Vue, the licence is MIT, the default branch is `develop`, the last push was on 2026-10-03, and the releases are 0.14.0 on 2026-06-30, 0.13.1 on 2025-06-17 and 0.12.0 on 2025-01-06. The homepage is the TDesign starter documentation site for Vue Next. ## The CLI, and the quick start it gives you The project is initialised with a CLI tool, `tdesign-starter-cli`, and the usage section gives two commands: ```bash ## install tdesign-starter-cli npm i tdesign-starter-cli@latest -g ## create project td-starter init ``` The second command is the interesting one, because `td-starter` is not the same name as the package you installed, and the difference between the two spellings is a small thing that will cost a user a minute. After the project exists, the develop step is the conventional pair: ```bash ## install dependencies npm install ## set up npm run dev ``` and the build has a production target and a test target: ```bash ## build npm run build ## build for test npm run build:test ``` The manifest also has a `dev:mock` script that opens the browser in a mock mode, which is the fastest way to see the screens with data before any backend exists. ## The modes, and the environment files behind them The scripts are structured around Vite modes, and each one maps to an environment file in the repository root, where there are `.env`, `.env.development`, `.env.site` and `.env.test`. The `dev` script runs `vite --open --mode development`, `dev:mock` runs the same in mock mode, `dev:linux` runs it without opening the browser, and `build` runs `vue-tsc --noEmit && vite build --mode release`, while `build:test` and `build:site` use the test and site modes. The `build:type` script runs only the type check, which is worth knowing because a full build does the type check first and will fail on a type error before Vite is even invoked. The mock directory at the root and the `mockjs` type dependency explain where the mock data scheme lives, and the `dev:mock` script is what makes the starter usable before you have written a backend. ## The dependency set, and what each choice implies The dependency list is where a starter kit shows its priorities. The component library is `tdesign-vue-next` with `tdesign-icons-vue-next` alongside it, so the icons match the components. The state layer is Pinia at version 3, with `pinia-plugin-persistedstate` for persisting store state across reloads, which is a small detail that saves a lot of work in an admin app where filters and table state should survive a navigation. `vue-router` at version 5 handles the routing, `vue-i18n` the localisation, `axios` the HTTP calls and `qs` the query strings. `@vueuse/core` is the composables library, `dayjs` the date handling, `echarts` the charts, `lodash` the general utilities, `nprogress` the route progress bar, and `tvision-color` the colour manipulation that TDesign's theming leans on. The dev dependencies use `@antfu/eslint-config` for the linting rules, `commitlint` for the commit messages, and `@vitejs/plugin-vue`. ## The tooling, and the strictness of the lint setup The lint configuration is worth a note because it is stricter than a default. The `lint` script runs ESLint over the Vue, JavaScript and TypeScript sources with `--max-warnings 0`, so a warning fails the command, and there is a `lint:fix` counterpart. Stylelint is handled separately, running over the HTML, Vue, CSS, Sass and Less sources, again with a fix variant. The commit messages are checked too, with `commitlint.config.js` at the root and a `prepare` script that installs the husky hooks, and the contributing guide names the Angular convention for commits and the Vue style guide for code. The `format` and `prettier` setup sits in `.prettierrc.js` and the stylelint configuration is in `stylelint.config.js`. There is also a `.cnb.yml` and a `.cnb/` directory, which is the CNB continuous integration platform, alongside the GitHub workflows. ## The tests, and the community versions There is an honest gap in the test story. The `test` script is `echo "no test specified,work in process"` and `test:coverage` says the same, so the scripts exist and do nothing yet. That is stated plainly in the manifest rather than hidden, which is worth crediting, and it means the starter gives you a project skeleton rather than a project with a working test harness. The second thing the README covers is community versions. There are kinds of community versions of the starter kit based on TDesign Vue Next, with a link to a community versions page for detail, and if you have developed one you are asked to open an issue or submit a pull request so it can be listed. The browser support table is specific, with Edge 84 or newer, Firefox 83 or newer, Chrome 84 or newer and Safari 14.1 or newer, which sets the floor for the generated project. ## Conclusion Adopt tdesign-vue-next-starter if you are building a back office on TDesign Vue Next and want the directory structure, routing, store setup and layout wiring already done. Skip it if you are building a consumer-facing product, since this is an admin skeleton, and skip it if you have standardised on another component library, since the whole point is TDesign's design language. Before you start, note that the repository's own test scripts are placeholders that print no test specified, so there is no automated test suite to lean on, and that linting runs with `--max-warnings 0`, so a warning fails the build. ## FAQ ### What is the tdesign-vue-next-starter? A starter kit for TDesign Vue Next UI components, developed with Vue 3, Vite, Pinia and TypeScript. It provides various pages for development, a complete directory structure, code specification configuration, dark mode, custom theme colours, several space layouts and a mock data scheme. ### How do I create a new project from the TDesign starter? Install the CLI with `npm i tdesign-starter-cli@latest -g`, then run `td-starter init`. After that `npm install` sets up the dependencies and `npm run dev` starts the development server. ### How do I run the TDesign starter with mock data? The dev:mock script runs Vite in mock mode, and there is a mock directory at the repository root along with the mockjs types. The dev script runs the same server in development mode, and dev:linux runs it without opening the browser. ### Does the TDesign starter have automated tests? Not yet. The test and test:coverage scripts are placeholders that print that no test is specified and the work is in process. Linting, on the other hand, is enforced, with ESLint running with --max-warnings 0 and Stylelint over the styles. ## Sources - [License: MIT](https://github.com/Tencent/tdesign-vue-next-starter/blob/develop/LICENSE) - [Project website](https://tdesign.tencent.com/starter/vue-next/) - [README](https://github.com/Tencent/tdesign-vue-next-starter/blob/develop/README.md) - [Releases](https://github.com/Tencent/tdesign-vue-next-starter/releases) - [Tencent/tdesign-vue-next-starter on GitHub](https://github.com/Tencent/tdesign-vue-next-starter) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/tencent-tdesign-vue-next-starter