A UI components library based on Vue.js

Usage no npm install needed!

<script type="module">
  import vigour from '';



 _   __(_)___ _____  __  _______
| | / / / __ `/ __ \/ / / / ___/
| |/ / / /_/ / /_/ / /_/ / /    
|___/_/\__, /\____/\__,_/_/     

Introduction 介绍

Build Status codecov Codacy Badge

Vigour is a UI component libaray based on Vue.js (currently compatible with Vue.js 2.X). It's SSR-friendly. For more information, please refer to the documentation.

Thank you for using Vigour. I will try my best to make it better💪.

Vigour 是一个基于 Vue.js 的 UI 组件库(目前兼容 Vue.js 2.x)。它对服务端渲染(SSR)友好。有关详细信息,请参阅文档

感谢你使用 Vigour,我会努力完善它的💪。

Quick-start CDN

<!DOCTYPE html>
  <link href="" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <div id="app">
    <vigour-checkbox :value="true">Hello World</vigour-checkbox>
    <vigour-button>Hello World</vigour-button>
  <script src=""></script>
  <script src=""></script>
    new Vue({
      el: '#app',

CDN Links

Installation 安装

You can install it using NPM:

你可以使用 NPM 安装:

npm install vigour

Or use Yarn to install:

或者使用 Yarn 安装:

yarn add vigour

Usage 使用

Import CSS 引入样式

You can import the CSS style of Vigour in the following ways.

通过以下方式,你可以引入 Vigour 的 CSS 样式。

import 'vigour/dist/vigour.css';

Import All Components 引入所有组件

You can import all the components of Vigour in the following ways.

通过以下方式,你可以引入 Vigour 的所有组件。

import vigour from 'vigour';

Import Components on Demand 按需引入组件

You are free to choose the components you need to import in a way similar to the following.


import { button } from 'vigour';
Vue.component(, button);

Please note: in the case of on-demand import, if you want to use Notification and Toast, you need to import them in the following ways.

请注意:在按需引入的情况下,如果想使用 Notification 和 Toast,你需要通过以下方式引入它们。

import {notification} from 'vigour';
import {toast} from 'vigour';