Vui: A Vue.js component library for designers and front-end developers based on Bootstrap 4

Vuikit with all the power of Vue

Vui is a lightweight component library for Single Page Applications based on Bootstrap 4. It allows for quick prototypes or enhancing your build with an extensive collection of pre-built components that are easy to use and customize to fit your exact needs. The project was designed with the principle of easy usage by designers and front-end developers.

A consistent and responsive Vue UI library, based on the front-end framework UIkit.

Features

  • Large set of easy to use Vue Components.
  • Download and add to any new or existing project.
  • Detailed documentation. The uncompressed Vui package is 434 KB.

Roadmap

  • 16 New Components (October 2018)
  • Themes and Layout Templates (December 2018)
  • NPM Packages (December 2018)
  • 6 New Widgets (Spring 2019)
  • Emit support for VSCode & Atom (Spring 2019)
  • Support for Fontawesome 4 & 5 icons (Spring 2019)
  • Custom Style Generator (Spring 2019)
  • Vui Studio (Summer 2019)

Introduction

Vui is intended to be use with a Vue 2.x CLI Webpack project. It will not work with Vue 1.x or if your project includes Vue.js as a script file. The components are written in Vue single file component pattern. Within the download you'll find the following directories and files, logically grouping common assets.

vui/
└── components/
    ├── Accordion.vue
    ├── AccordionPanel.vue
    ├── Alert.vue
    ├── AlertLink.vue
    ├── Badge.vue
    ├── Breadcrumb.vue
    ├── BreadcrumbItem.vue
    ├── Button.vue
    ├── ButtonGroup.vue
    ├── Callout.vue
    ├── Card.vue
    ├── CardBody.vue
    ├── CardFooter.vue
    ├── CardHeader.vue
    ├── CardImage.vue
    ├── CardLink.vue
    ├── CardSubtitle.vue
    ├── CardText.vue
    ├── CardTitle.vue
    ├── Checkbox.vue
        ...
        ...
        ...

Dependencies

Vui has no dependency on jQuery or Bootstrap's Javascript, however a few of the components require the following libraries. Listed below are the required dependencies:

Vui Core:

  • Vue 2
  • Vue-CLI
  • Bootstrap 4.1
  • Font Awesome 3.2.1

Vui Component: CodePanel

  • Prism Syntax Highligter
  • Clipboard.js

Vui Utility: Draggable

  • Greensock Animation Platform

Browser Support

Vui supports all the browsers and devices that Bootstrap 4.1 CSS & Vue 2 support.

Download and Setup

Installing Vui Required Files

If you are looking to quickly add Vui into your project, use the following CSS & JS.

CSS

<!-- Required for Vui -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.css" />

<!-- Required for COMPONENT: CodePanel -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/themes/prism.min.css">

JS

Several of the Vui components require the use of JavaScript helper libraries to function. Place the following <script>s near the end of your pages, right before the closing <body> tag.

<!-- Required for COMPONENT: CodePanel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/prism.min.js">

<!-- Required for UTILITY: Draggable -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/utils/Draggable.min.js">

Webpack's eslinter prevented the closing </script> tags from rendering in the code panel. Make sure if you copy the code above that you add the closing tags.

Adding Vui to Your Project

After you unzip the vui-1.0.0.zip file, place it in the root of your projects src directory.

Vui to Your Project

Vui to Your Project

  • components: contains all of Vui's main components.
  • directives: contains all of Vui's utility directives.
  • images: misc graphics required for components.
  • widgets: are items that combine several components. i.e. Login Panel
  • vui_filters.js: custom utility filters.
  • vui.css: various global component styles.
  • vui.js: the main module that imports and registers everything in a central location.

Registering Vui with Your Project

In order for Vui to work with your project, you have to import vui.js in your main.js file. This will globally register all of Vui's components, so they are all accessible from anywhere in your project without the need to import them into your vue files.

That's it!

Vuikit is a MIT licensed Vue library. Check out the documentation and give it a star on GitHub if you liked it. By @joelomoglio.