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.
- 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.
- 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)
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 ... ... ...
- Vue 2
- Bootstrap 4.1
- Font Awesome 3.2.1
Vui Component: CodePanel
- Prism Syntax Highligter
Vui Utility: Draggable
- Greensock Animation Platform
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.
<!-- 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">
<script>s near the end of your pages, right before the closing
<!-- 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
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.