Skip to content
On this page

Getting Started

uiv is a Bootstrap 3 component lib implemented by Vue.

  • Lightweight
    • All components ~20KB Gziped.
    • No extra CSS file.
    • Individually import supported.
  • Vue 3 supported.
  • SSR (server-side rendering) supported.
  • All env supported:
    • UMD build uiv.umd.js can be used in all environments (including browser)
    • ES Module build uiv.es.js is for modern bundlers like webpack 2 or rollup
    • CommonJS build uiv.cjs.js is for older bundlers like browserify or webpack 1.

Versions

uiv versionVue.js versiondocument
2.x3.xhttps://uiv.wxsm.space
1.x2.xhttps://uiv-v1.wxsm.space
0.x2.xhttps://uiv-v0.wxsm.space

Install

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

bash
$ npm i uiv --save

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

javascript
// main.js
import 'bootstrap/dist/css/bootstrap.min.css'
import { createApp } from 'vue'
import * as uiv from 'uiv'

const app = createApp({ ... })

app.use(uiv)

app.mount(...)

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:

javascript
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

javascript
import { Alert } from 'uiv'
// or
// import Alert from 'uiv/dist/Alert'

export default {
  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:

html
<!-- 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.umd.js into your page. For detail usages (e.g. load specify version, IMPORTANT in production mode) and different CDN providers, you can visit:

Browser compatibility

All browsers supported by Vue and Bootstrap 3 CSS are supposed to be also supported by this lib.

Released under the MIT License.