# Getting Started

uiv is a Bootstrap 3 component lib implemented by Vue 2.

Lightweight
- All components ~20KB Gziped.
- No extra CSS file.
- Individually import supported.
IE 9+ & modern browsers supported.
SSR (server-side rendering) supported.
All env supported:
- UMD build uiv.min.js can be used in all environments (including browser)
- ES Module build uiv.esm.js is for modern bundlers like webpack 2 (opens new window) or rollup (opens new window)
- CommonJS build uiv.common.js is for older bundlers like browserify (opens new window) or webpack 1 (opens new window).

# Install

If you are using module bundlers such as Webpack, you can directly include package into your project via:

NPM:

$ npm install uiv --save

or Yarn:

$ yarn add uiv

Then register uiv components and directives all at once in your app's entry:

// main.js
import 'bootstrap/dist/css/bootstrap.min.css'
import Vue from 'vue'
import * as uiv from 'uiv'
Vue.use(uiv)

That's it. Happy coding!

WARNING

The uiv lib is meant to be a replacement of bootstrap js files. Therefore, include the css file of bootstrap, but not js files, such as the bootstrap.min.js, which should not be included. Otherwise, you might encounter some unexpected issues.

# No conflict

All components & directives will be installed with no prefix by default, you can add any prefix to them to avoid conflicts with other libs if needed.

For example:

Vue.use(uiv, {prefix: 'uiv'})

Results in:

Components such as <alert> becomes <uiv-alert>
Directives such as v-tooltip becomes v-uiv-tooltip
Global methods such as $alert becomes $uiv_alert

# Import individually

If you don't want all of the components for some reason (e.g. to save the bundle size), you can also import them individually.

# Example

import { Alert } from 'uiv'
// or
// import Alert from 'uiv/dist/Alert'
new Vue({
  components: {
    Alert
  }
})

TIP

Import from uiv/dist/something can ensure bundle size saving, others might not (depend on bundler's tree-shaking).

# Browsers

You can load & install uiv package directly in browsers. For example:

<!-- Remember to import Vue and Bootstrap CSS file before this! -->
<script src="//unpkg.com/uiv"></script>

This will simply load the latest version of uiv.min.js into your page. For detail usages (e.g. load specify version, IMPORTANT in production mode) and different CDN providers, you can visit:

# Complete usage example

<!-- index.html -->
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script type="text/javascript" src="//vuejs.org/js/vue.min.js"></script>
  <script type="text/javascript" src="//unpkg.com/uiv/dist/uiv.min.js"></script>
</head>
<body>
<div id="app">
  <tabs>
    <tab>Tab content 1.</tab>
    <tab>Tab content 2.</tab>
  </tabs>
</div>
<script>
  // No need to install uiv, we already do this for you after script loaded.
  // Define `window.__uiv_options` before script loaded if you need install options.
  new Vue().$mount('#app')
</script>
</body>
</html>

This will create a working Tabs component on your page.

# Browser compatibility

All browsers supported by Vue 2 (opens new window) and Bootstrap 3 CSS (opens new window) are suppose to be also supported by this lib.

WARNING

IE8 and below are not supported.

I18n →