Wondering what’s next for npm?Check out our public roadmap! »

    vue-uiv

    0.21.5 • Public • Published

    uiv-logo.png

    Build Status Coverage Status NPM Downloads NPM Version CDNJS Version License

    Introduction

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

    • Lightweight
      • All components ~20KB Gziped.
      • Dependencies only Vue & Bootstrap CSS.
      • No extra CSS.
      • 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 or rollup
      • CommonJS build uiv.common.js is for older bundlers like browserify or webpack 1.

    Documentation

    To check out live examples and docs, visit https://uiv.wxsm.space.

    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!

    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'
     
    new Vue({
      components: {
        Alert
      }
    })

    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.
      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 and Bootstrap 3 CSS are suppose to be also supported by this lib (IE8 and below are not supported).

    Changelog

    Detailed changes for each release are documented in the release notes.

    Contribute

    JavaScript Style Guide

    Welcome and thanks to use and contribute to this project. Your support is very important.

    If you found any problem / bug during the use of uiv, or have any suggustion that can make this lib better, please create an issue.

    Pull requests are also welcome! However, before you started working on a PR, it is highly recommend to create an issue with your idea first, so people can know what's going to happen and avoid duplicated work.

    Build Setup

    # install dependencies 
    npm install
     
    # serve demos & docs with hot reload at localhost:8080 
    npm run dev
     
    # build dist 
    npm run dist
     
    # build document 
    npm run build
     
    # run all tests 
    npm test

    License

    MIT

    Install

    npm i vue-uiv

    DownloadsWeekly Downloads

    3

    Version

    0.21.5

    License

    MIT

    Unpacked Size

    1.3 MB

    Total Files

    83

    Last publish

    Collaborators

    • avatar