#Vux Guide: Mobile UI Components for Vue 2

Vux is a mobile UI component library based on WeUI, designed for Vue 2. It provides a set of high-quality components for building mobile web apps.

Note: Vux is not officially maintained for Vue 3. For Vue 3, consider alternatives like Vant or NutUI.

#Installation

npm install vux --save

#Configuration with Vue CLI (Webpack)

You need to configure vux-loader to work with your project.

1. Install vux-loader:

npm install vux-loader --save-dev

2. Modify vue.config.js:

const vuxLoader = require('vux-loader');

module.exports = {
  configureWebpack: (config) => {
    vuxLoader.merge(config, {
      plugins: ['vux-ui'],
    });
  },
};

3. For customizing theme variables, you can use less and vux-loader with less-vars plugin.

#Basic Usage

#Import Components

You can import components globally or on-demand.

#Global Import

import Vue from 'vue';
import Vux from 'vux';

Vue.use(Vux);

#On-Demand Import

import { Group, Cell } from 'vux';

Vue.component('group', Group);
Vue.component('cell', Cell);

#Common Components

#Group and Cell

<template>
  <group>
    <cell title="Title" value="Value" is-link></cell>
    <cell title="Another" value="Detail" link="/path"></cell>
  </group>
</template>

<script>
import { Group, Cell } from 'vux';

export default {
  components: { Group, Cell },
};
</script>

#Button

<template>
  <button-tab>
    <button-tab-item>Tab 1</button-tab-item>
    <button-tab-item>Tab 2</button-tab-item>
  </button-tab>
</template>

<script>
import { ButtonTab, ButtonTabItem } from 'vux';

export default {
  components: { ButtonTab, ButtonTabItem },
};
</script>

#Popup and Dialog

<template>
  <div>
    <x-button @click="showPopup = true">Open Popup</x-button>
    <popup v-model="showPopup" position="bottom">
      <div style="padding: 20px;">Popup Content</div>
    </popup>

    <x-button @click="showAlert">Alert</x-button>
  </div>
</template>

<script>
import { Popup, XButton } from 'vux';
import { Alert } from 'vux';

export default {
  components: { Popup, XButton },
  data() {
    return { showPopup: false };
  },
  methods: {
    showAlert() {
      Alert.show({
        title: 'Title',
        content: 'Alert message',
      });
    },
  },
};
</script>

#Form Components

#Input, Radio, Checkbox

<template>
  <group>
    <x-input title="Username" v-model="username" placeholder="Enter username"></x-input>
    <x-radio title="Gender" :options="['Male', 'Female']" v-model="gender"></x-radio>
    <x-checkbox title="Hobbies" :options="hobbies" v-model="selectedHobbies"></x-checkbox>
  </group>
</template>

<script>
import { Group, XInput, XRadio, XCheckbox } from 'vux';

export default {
  components: { Group, XInput, XRadio, XCheckbox },
  data() {
    return {
      username: '',
      gender: '',
      hobbies: ['Reading', 'Gaming', 'Sports'],
      selectedHobbies: [],
    };
  },
};
</script>

#Toast and Loading

#Toast

import { Toast } from 'vux';

// Simple text
Toast.show('Operation successful');

// With options
Toast.show({
  type: 'success',
  text: 'Saved!',
  duration: 2000,
});

#Loading

import { Loading } from 'vux';

Loading.show();
// ... after async operation
Loading.hide();

#Customizing Theme

Vux uses Less variables for theming. To override, create a vux.less file and import it.

1. Create src/styles/vux.less:

@theme-color: #ff6600;
@font-size-base: 14px;

2. Configure vue.config.js to include the custom variables:

const vuxLoader = require('vux-loader');

module.exports = {
  configureWebpack: (config) => {
    vuxLoader.merge(config, {
      plugins: [
        {
          name: 'vux-ui',
          options: {
            theme: './src/styles/vux.less',
          },
        },
      ],
    });
  },
};

#Integration with Vue Router

Vux components work seamlessly with Vue Router. For example, using cell with link prop:

<template>
  <group>
    <cell title="Home" link="/"></cell>
    <cell title="About" link="/about"></cell>
  </group>
</template>

#Best Practices

• Use on-demand import to keep bundle size small.
• Override theme variables early in development.
• Test on mobile devices or emulators for accurate UI.
• Combine Vux with Vuex for complex state management.
• Keep Vux components inside <group> for consistent spacing.

#Troubleshooting

#Common Issues

1. Styles not loading: Ensure vux-loader is properly configured.
2. Component not found: Register components explicitly or import them in the component’s components section.
3. Build errors: Check webpack configuration and ensure Less is installed.

npm install less less-loader --save-dev

#Alternatives for Vue 3

Since Vux is not maintained for Vue 3, consider these alternatives:

• Vant – Mobile UI components built on Vue 3.
• NutUI – JD.com’s mobile UI library for Vue 3.
• Ionic Vue – Cross-platform mobile components.

Installation example (Vant):

npm install vant