Bootstrap 3 components implemented by Vue 2

Bootstrap 3 components implemented by Vue 2

Bootstrap 3 components implemented by Vue 2. .If this project has helped you out, please support it with a star 🌟.

If this project has helped you out, please support it with a star .

Introduction

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 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'
// or
// import Alert from 'uiv/dist/Alert'

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

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

Download Details:

Author: uiv-lib

Live Demo: https://uiv.wxsm.space/

GitHub: https://github.com/uiv-lib/uiv

vuejs javascript vue-js vue bootstrap

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Bootstrap Wizard with Vue.JS

Bootstrap Wizard A nice Bootstrap Wizard with Vue.JS.

Bootstrap Responsive Grid System For Vue.js

vue-grid-responsive .Bootstrap Responsive Grid System For Vue.js

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

A Vue.js wrapper component for Grid.js

A Vue wrapper component for Grid.js. Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.

Rocket Downrange: WebSite built on Vue.js, Axios, Bootstrap 4 and Netlify

Rocket Downrange is a site I am developing to showcase the advancements of humanity in regards to the exploration of outer space. While the core Vue.JS is my own writing (please be patient as I continue to learn), all data you see on the site is returned from various API's. The first three API's I am using belong to SpaceX (USA), Rocket Lab (USA) and NASA (USA) and are provided for free or free with a registered key. Thus, the site should continue to be a fun and dynamic way of keeping updated on the industry at large.