Skip to content
Get packs

Guide · Open source

How to use vux: install, run and build mobile Vue pages

Updated · written with AI from the project's own documentation and checked against our catalogue data

Vux is an open-source set of ready-made mobile user interface components for Vue, built on WeUI, a design system that mimics the look of WeChat. This guide shows how to create a starter project from the vux2 template, run it locally and decide whether vux fits your project. By the end you will know the prerequisites, the setup commands from the project README and what to check before you commit to it.

VUXairyland/vux · ★ 17.4k · MIT

Quick start

  1. 1Check requirements. Confirm you use Vue 2.3.0 or newer, webpack 2.0 or newer, and Node.js 7.6 or newer for development.
  2. 2Install the template generator. Run npm install vue-cli -g to install vue-cli globally.
  3. 3Create the project. Run vue init airyland/vux2 projectPath to generate a project from the vux2 template.
  4. 4Install dependencies. Change into the project folder and run npm install, or yarn.
  5. 5Start the dev server. Run npm run dev, or yarn dev, and open the local page to see the project running.
  6. 6Build your pages. Use the vux components in your Vue 2 project, checking the live demo and docs at vux.li for usage.

Check whether vux fits your project

The README lists Vue@^2.3.0 as a requirement, so vux is aimed at Vue 2 projects. It is a good match for developers building mobile web pages and teams that want WeChat-style or WeUI-style interfaces.

It is a poor match for Vue 3 projects, desktop-first applications, or teams that need English documentation, because the README says the English docs are still in progress and the main docs are in Chinese.

  • Good fit: Vue 2 mobile web pages, WeUI or WeChat-style interfaces, webpack-based starter projects
  • Poor fit: Vue 3 projects, desktop-first apps, teams that need English docs

Check the prerequisites before you install

The README lists the requirements as vue@^2.3.0 (for the .sync modifier), webpack@^2.0, and node@^7.6 for development. Install a Node.js version that meets the development requirement before you start.

  • Vue 2.3.0 or newer
  • webpack 2.0 or newer
  • Node.js 7.6 or newer (for development)

Create a project from the vux2 template

The quick start uses the vue-cli template generator. Install it globally, then create a project from the airyland/vux2 template. The README notes that the vux2 template is directly modified from the Vue official webpack template.

Replace projectPath with the folder name you want to use.

npm install vue-cli -g vue init airyland/vux2 projectPath

Install dependencies and start the dev server

Move into the new project folder, install its dependencies, then start the development server. The README allows yarn as an alternative to npm for these two steps.

cd projectPath npm install // or yarn npm run dev // or yarn dev

Use the components and read the docs

Once the project runs, you can build your pages with vux components. The component reference lives on the Chinese documentation site at vux.li, and the README links a live demo at vux.li/demos/v2. Check the demo for how components look and behave before you use them.

The README also lists Vux as built on WeUI and inspired by projects such as Vant, Ant Design Mobile and SUI Mobile, so compare those options if the Chinese docs or Vue 2 requirement are a problem.

  • Live demo: vux.li/demos/v2
  • Documentation: vux.li (Chinese; English in progress)

What people use it for

  • Building a mobile web shop or form page with Vue 2 and ready-made components
  • Making a WeChat-style interface that matches the WeUI design system
  • Starting a new webpack-based mobile Vue project from the vux2 template

Frequently asked questions

How do I install vux?

The README uses vue-cli to generate a project. Run npm install vue-cli -g, then vue init airyland/vux2 projectPath, then cd into the folder, run npm install and npm run dev. Yarn can replace npm for the install and dev steps.

What are the vux requirements?

The README lists vue@^2.3.0 (for the .sync modifier), webpack@^2.0, and node@^7.6 for development. Vue 3 is not listed as supported.

Is vux free to use?

Yes. The project is licensed under the MIT license, as shown in the README and on its npm page.

Does vux work with Vue 3?

The README only lists Vue@^2.3.0 as a requirement, so it should be treated as a Vue 2 library. Check the project for any newer support before you plan a Vue 3 project.

Why does npm run dev fail after setup?

The source does not list specific troubleshooting steps. Check that your Node.js version meets the 7.6 development requirement and that Vue 2.3.0 or newer and webpack 2.0 or newer are used, then consult the project issues page on GitHub.

What are good alternatives to vux?

Projects commonly compared with vux include Vant, Element UI and Ant Design Vue. Vant is a mobile-focused option to compare first, while Element UI and Ant Design Vue target broader interfaces.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use vux if you are building mobile web pages with Vue 2 and want WeUI or WeChat-style components with a ready webpack starter. Pick another library if you use Vue 3, need desktop-first components, or need complete English documentation.

Install options & downloads