Guide · Open source

How to use mint-ui: install, import components and tips

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

Mint UI is a set of ready-made mobile interface components for Vue.js, installed from npm. This guide shows you how to add it to a Vue 2 project, import all of it or only the pieces you need, and load its styles. By the end you will know the install commands, the two import approaches, and the main points to check before you commit to it.

Mint UIElemeFE/mint-ui · ★ 16.4k · MIT Install options & downloads

Quick start

1Check your Vue version. Confirm your project uses Vue 2.0. Mint UI's README documents Vue 2.0 support.
2Install the package. Run npm i mint-ui -S in your project folder.
3Choose an import style. Import the full library for simplicity, or import only the components you need for a smaller bundle.
4Import the stylesheet. Import mint-ui/lib/style.css, or let babel-plugin-component handle CSS automatically.
5Register components. Call Vue.use(Mint) for everything, or Vue.component with each named component.
6Check the docs for each component. Use the official documentation to find the props and usage for the components you chose.

What you need before you install mint-ui

Mint UI is installed with a package manager and needs a Vue 2.0 project. The README lists Node.js and npm as prerequisites.

The README describes the library as targeting Vue 2.0. It also shows a separate install path for Vue 1.x, but that is only needed if your project is still on Vue 1.

Node.js and npm installed
An existing Vue 2.0 project
Vue 1.x only if you are maintaining an older app

Install mint-ui with npm

Run the install command from your project folder. The -S flag saves mint-ui as a dependency in your project.

If you are on Vue 1.x, the README gives a different package version to install instead.

npm i mint-ui -S

# for Vue 1.x
npm i mint-ui@1 -S

Import all components or only the ones you need

The simplest option is to import the whole library and register it with Vue.use. You also import the stylesheet once.

If you want a smaller bundle, import only the components you use and register each one with Vue.component. The README notes that this approach is paired with babel-plugin-component, which is covered in the next section.

Import all: load Mint, call Vue.use(Mint), and import mint-ui/lib/style.css
Import specific: import named components such as Cell and Checklist, then register each with Vue.component(Name.name, Name)

import Vue from 'vue';
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css';

Vue.use(Mint);

Use babel-plugin-component for modular imports and automatic CSS

The README recommends babel-plugin-component for importing components one at a time. According to the README, it auto-imports the CSS file and handles modular component imports.

Install the plugin as a dev dependency, then add it to your .babelrc file with mint-ui listed as the library name and style set to true.

Auto imports the CSS file
Modular import of each component

npm i babel-plugin-component -D

// .babelrc
{
  "plugins": ["other-plugin", ["component", [
    { "libraryName": "mint-ui", "style": true }
  ]]]
}

Load mint-ui from a CDN instead of npm

The README lists CDN links for both the JavaScript and CSS files, served through unpkg and RawGit. Use these if you are adding Mint UI to a page without a build step.

The README lists RawGit as one option. Check the README for current status before relying on it, since the source here does not say more about it.

unpkg: https://unpkg.com/mint-ui/lib/index.js and https://unpkg.com/mint-ui/lib/style.css
RawGit links are also listed in the README

Run the development setup and find documentation

To work on the library itself, the README gives a single development command. The official documentation and homepage are linked from the README, so use them to look up each component's usage.

Before opening a pull request, the README asks contributors to read the Contributing Guide.

Documentation: http://mint-ui.github.io/docs
Homepage: http://mint-ui.github.io

npm run dev

What people use it for

Building a mobile-style web page in a Vue 2 app with prebuilt controls
Adding a few form or list components, such as Cell and Checklist, to an existing Vue app
Loading Mint UI from a CDN for a simple page without a build tool

Frequently asked questions

Does mint-ui work with Vue 3?

The README only documents support for Vue 2.0 and Vue 1.x. If your project is on Vue 3, the source does not show that mint-ui supports it, so check with the maintainers or pick another library.

How do I install mint-ui?

Run npm i mint-ui -S in your project folder. You need Node.js, npm and a Vue 2.0 project. For Vue 1.x, the README uses npm i mint-ui@1 -S instead.

Is mint-ui free to use?

mint-ui is released under the MIT licence, as stated in the README. The source here does not discuss pricing beyond that.

Can I import only some components?

Yes. The README shows importing named components such as Cell and Checklist and registering them with Vue.component. It also describes babel-plugin-component for modular imports.

What is the difference between importing all of mint-ui and importing specific components?

Importing everything with Vue.use(Mint) is simpler. Importing specific components lets you keep the bundle smaller, because you only load what you use. The README presents both options.

What are alternatives to mint-ui?

The comparable projects listed for this directory are Vant, Onsen UI and Framework7. The source does not compare their features, so review each one's documentation before choosing.

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

Mint UI suits developers who already use Vue 2 and want prebuilt mobile components they can import selectively. Pick something else if you use Vue 3, need a no-code builder, or require guaranteed active maintenance, since the last push shown is from February 2022.

Install options & downloads