vue-ydui: a Vue 2 mobile component library with its build output committed

A mobile component set from the team behind ydcss.com

vue-ydui is a component library for mobile interfaces written against Vue 2, published by the team behind ydcss.com under the name YDUI Touch. The repository description is unusually direct about scope: a mobile component library with Vue2.js, and the README calls it a mobile and WeChat UI built on Vue 2.x. The repository topics follow the same line, listing backtop, datetime, dialog, popup, slider, ui, vue and vue2.

That topic list is worth reading as a shopping list. Backtop, dialog and popup cover the floating-layer and scroll-position patterns that mobile pages need constantly. Datetime points at date and time pickers, the single most requested control in Chinese enterprise mobile apps. Slider covers the range control. There is no table, no tree and no data grid anywhere in the list, because there is no desktop story here at all.

The repository numbers suggest a good deal of real use: 2,726 stars and 550 forks, with 201 open issues still on the board. The default branch is master, the license is MIT, and the last push landed on 2026-07-27, so the project is not archived and work is still reaching it.

What the npm package actually contains

Installing vue-ydui gets you two files, and the package manifest is explicit about it. The files field lists a single directory, dist, so nothing but built output is published. Inside it, main points at dist/ydui.rem.js and style points at dist/ydui.rem.css.

That rem in the filename is the first design decision worth knowing about. The default stylesheet assumes the page root font size scales with viewport width. A second stylesheet built for absolute pixel units comes out of a separate script, so a project that does not use rem scaling wants that variant rather than the default main entry.

  "name": "vue-ydui",
  "version": "1.2.5",
  "main": "dist/ydui.rem.js",
  "style": "dist/ydui.rem.css",

Version 1.2.5 is the number in the repository. There are no published releases on the GitHub releases tab, so version history has to come from npm and from commit messages rather than a changelog.

The dependency list dates the project precisely. Vue is pinned at ^2.5.2 and vue-router at ^2.1.1, and the build tooling belongs to the same era: babel-core ^6.21.0, file-loader ^0.10.1, css-loader ^0.26.1 and gulp ^3.9.1. Vue 2 stopped receiving updates at the end of 2023 and the current release line is Vue 3, which makes this a Vue 2 era library rather than a candidate for a new project.

Running the example app on port 4321

The README's development section is three numbered steps and a local URL:

1. npm install

2. npm run dev

3. http://127.0.0.1:4321

The npm script behind step two is longer than it looks. It runs webpack-dev-server with the example directory as content base, port 4321, inline and hot reload enabled, host bound to 0.0.0.0, and build/webpack.dev.conf.js as config:

    "dev": "webpack-dev-server --content-base example/ --port 4321 --inline --hot --host 0.0.0.0 --config build/webpack.dev.conf.js",

The repository tree explains what that server is for. The example directory holds app.vue, index.html, main.js, a routers directory and a styles directory, so the demo is a small routed single page application rather than one isolated component test. The 0.0.0.0 binding is the detail that matters most in practice. It is what lets a phone on the same network load the demo, and for a mobile component library, testing on a real handset is the entire reason to run the dev server instead of reading the documentation.

Three build targets for the same component set

The build script is a chain, and reading it tells you that this project publishes several artifacts rather than one:

    "build": "npm run build:rem:components && npm run build:px:components && npm run build:prod && gulp --gulpfile build/build.prod.js"

The first two steps are component builds, configured by build/webpack.dist.components.rem.conf.js and build/webpack.dist.components.px.conf.js. That pairing lines up with the rem and px stylesheets named in the package entry points: the same components compiled into two unit systems. The third step, build/webpack.dist.prod.conf.js, produces the production bundle. The final gulp step with build/build.prod.js handles post-processing, judging by the gulp-rename and gulp-uglify entries in the dev dependencies.

Style work is delegated rather than written inline. less ^2.7.2 with less-loader ^2.2.3 covers component styles, postcss ^5.2.14 and autoprefixer ^6.6.1 handle vendor prefixing, and gulp-less and gulp-clean-css compile and minify the output stylesheets. The dist directory is present in the repository tree, so the built files are committed rather than generated only at publish time, which is consistent with a project that expects people to grab a built file straight from the tree.

Eight upstream projects behind the components

The README credits eight other repositories, and that list says more about the project than any feature enumeration could. fastclick from ftlabs solves the tap delay on older mobile browsers. countup.js from inorganik handles animated number transitions. scroller from pbakaus is a momentum scrolling implementation, the kind of component that normally takes a library years to get right.

Three of the credits are whole component libraries: iview, vux and mint-ui. Vant is missing from the list, which is a useful dating signal. mint-ui stopped development once Vue 2 was the ceiling and Vant became the default pick for Vue mobile work, so vue-ydui drew its inspiration from the Vue 2 era of mobile UI rather than from what came after. The last two credits, progressbar.js and animate.css, cover a progress indicator and transition animations.

Each credit line links to the upstream license next to the project name. That is the correct practice, and it also indicates the licences line up, since MIT is the license on this repository too.

Where the README stops and the docs site starts

The README is short, and what it holds is a logo, three links, a QR code, the three development steps and the credits list. Those links point at the demo site, the documentation at http://vue.ydui.org/docs, and a blog on ydcss.com. None of the three destinations live in the repository, so an evaluation that stops at the README will not tell you what the components look like or how their options are configured.

There is one inconsistency worth naming. The README footer reads Copyright (c) 2018, while the manifest carries version 1.2.5 and the most recent push landed in July 2026. Both statements can hold at once, since a copyright line is often written once and never revisited, but it does mean the footer is a poor signal of how current the project is. The manifest version and the push date are the better indicators.

For a reader deciding whether to adopt it, the checks are quick. On a Vue 2 project that needs mobile-oriented components with a rem stylesheet already worked out, the demo site answers the visual question in a minute. On a Vue 3 project, this library cannot help without a compatibility layer, and a library built for the current Vue release is the shorter path.

Editorial conclusion

vue-ydui is a finished, dated thing rather than an evolving one: a Vue 2 mobile component set with a rem stylesheet, three build targets and an example app that runs on port 4321. It holds up as a reference implementation and as a source of mobile interaction patterns, and as a dependency only for projects still running Vue 2. Start with the demo at vue.ydui.org, then read build/webpack.dev.conf.js to see how the rem conversion is wired before copying any of the build setup.

Frequently asked questions

Official sources

1. Issues
2. License: MIT
3. Project website
4. README
5. ydcss/vue-ydui on GitHub