Building a Vue 2 Mobile UI Component Library: Scaffolding, Packaging, Component Types, and Icon Strategies

Scaffolding Choice

Although most of our Vue projects use Webpack, we evaluated both Webpack and Rollup for the component library. Rollup offers better tree‑shaking and smaller bundles, but Webpack was chosen because it supports demo pages, hot‑module replacement, and requires less effort for a multi‑developer team.

Packaging

We use Webpack to produce a library that works in various environments (AMD, CommonJS, script tag). The output.libraryTarget is set to umd so the bundle can be consumed everywhere. Additional options such as output.umdNamedDefine are enabled to name the AMD module.

module.exports = {
  path: path.resolve(__dirname, 'dist'),
  publicPath: '/',
  filename: '[name].js',
  library: 'xxx', // module name
  libraryTarget: 'umd',
  umdNamedDefine: true
};

Vue itself is declared as an external dependency to avoid bundling it. Because the global variable exposed by a script tag is Vue (capital V), we map the external name accordingly.

externals: {
  vue: 'vue'
}

Component Types

The library will provide three kinds of Vue entities: components, directives, and filters. Modal‑type components (e.g., Dialog, Toast) are exposed as instance methods by attaching them to Vue.prototype , enabling a global call such as this.$dialog(options) .

this.$dialog(options);

Component CSS Scope

Initially we used the scoped attribute to isolate component styles, which adds a unique data attribute to elements and selectors. However, this makes style overriding difficult, so we removed scoped and rely on a class‑based naming convention for better customizability.

<style scoped>
.example[data-v-f3f3eg9] { color: red; }
</style>

On‑Demand Usage and Custom Build

With more than 40 components, the full bundle becomes large. To support selective usage, we provide a CLI command npm run custom that lets developers pick required components, generates a tailored Webpack config, and builds a minimal package containing only the selected parts.

npm run custom
# interactive selection of components
# builds a custom bundle in dist/

Icon Handling

For small icons we evaluated Base64, CSS sprites, and icon fonts, but chose SVG because it scales cleanly on mobile, offers richer styling, and can be combined into an SVG sprite using symbol and use . Webpack’s svg‑sprite‑loader automates sprite generation.

<svg>
  <symbol id="icon1"> ... </symbol>
  <symbol id="icon2"> ... </symbol>
</svg>

<svg>
  <use xlink:href="#icon1"></use>
</svg>

For more details, follow the "Full‑Stack Exploration" public account.