uiv

library2.0.6jsnpmunverified

uiv is a lightweight collection of Bootstrap 3 components meticulously re-implemented for Vue.js. The current stable version, 2.0.6, targets Vue 3, while previous 1.x versions supported Vue 2. The library is actively maintained with frequent bug fix releases, as seen in the recent 2.0.x updates. Key differentiators include its small bundle size (approximately 20KB gzipped for all components), absence of an additional CSS file (relying on Bootstrap's own styles), support for individual component imports to minimize payload, and compatibility with Server-Side Rendering (SSR). It provides a comprehensive set of common UI elements like Modals, Tabs, Dropdowns, and more, enabling developers to build Bootstrap-styled interfaces using Vue's reactivity system. This library aims to provide a native Vue experience for Bootstrap 3, distinguishing itself from wrappers that might rely on jQuery or other external dependencies for component logic.

web-framework

npm install uiv

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · UIV

uiv

web-frameworkjavascriptv2.0.6

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

* as uiv

✓ import * as uiv from 'uiv'

✗ const uiv = require('uiv')

For global registration as a Vue plugin via `app.use(uiv)`. Prior to v2, CommonJS `require` was more common. In Vue 3, ESM is standard.

Specific Component (e.g., Modal)

✓ import { Modal } from 'uiv'

✗ import Modal from 'uiv/components/modal'

Recommended for tree-shaking and only importing necessary components. The direct path import (`uiv/components/modal`) was a common pattern in older versions or other libraries but is not standard for uiv v2.

Bootstrap CSS

✓ import 'bootstrap/dist/css/bootstrap.min.css'

✗ import 'uiv/dist/uiv.min.css'

uiv does NOT ship with its own CSS. You MUST include Bootstrap's CSS separately in your project for proper styling. This is a frequent oversight.

Types (for TypeScript)

✓ import type { DropdownOption } from 'uiv'

uiv ships with TypeScript definitions, allowing for type-safe usage of its components and utility types.

This quickstart demonstrates how to initialize uiv as a Vue 3 plugin and use a basic modal component, highlighting the necessity of importing Bootstrap's CSS.

import 'bootstrap/dist/css/bootstrap.min.css' import { createApp, h } from 'vue' import * as uiv from 'uiv' const App = { template: ` <div class="container"> <h1>uiv Example</h1> <button type="button" class="btn btn-primary" @click="showModal = true"> Open Modal </button> <uiv-modal v-model="showModal" title="Hello uiv!" @hide="onModalHide"> This is a simple modal dialog using uiv components. Ensure Bootstrap CSS is imported! <template #footer> <button type="button" class="btn btn-default" @click="showModal = false">Close</button> <button type="button" class="btn btn-primary" @click="showAlert">Do Something</button> </template> </uiv-modal> </div> `, data() { return { showModal: false } }, methods: { onModalHide() { console.log('Modal was hidden') }, showAlert() { alert('Action taken!') this.showModal = false } } } const app = createApp(App) app.use(uiv) app.mount('#app')

Debug

Known issues

breakinguiv v2.0.0 and above are exclusively for Vue 3. Projects using Vue 2 must remain on uiv v1.x (or v0.x). The API might have minor changes due to Vue 3's composition API and other breaking changes.

fix

For Vue 3 projects, install `uiv@^2`. For Vue 2 projects, install `uiv@^1`. Review the migration guide if upgrading an existing Vue 2 project to Vue 3 and uiv v2.

affects: >=2.0.0

gotchauiv components require Bootstrap 3's CSS for proper styling. The library does not bundle this CSS. Failing to import `bootstrap/dist/css/bootstrap.min.css` (or a custom Bootstrap build) will result in unstyled components.

fix

Ensure `import 'bootstrap/dist/css/bootstrap.min.css'` is present in your main application entry file (e.g., `main.js` or `App.vue` script setup).

affects: >=0.x

gotchaThe `Btn` component in uiv v2.0.6 (and potentially earlier v2 versions) internally uses `RouterLink` from `vue-router`. If `vue-router` is not installed and configured in your Vue 3 application, using the `Btn` component may lead to errors or unexpected behavior, especially when attempting to use its routing capabilities.

fix

If using the `Btn` component with routing functionality, ensure `vue-router` is installed and registered with your Vue application (e.g., `app.use(router)`). If you only need a simple button, consider using a standard HTML `<button>` or another uiv component without routing properties.

affects: >=2.0.6

gotchaDirectives like `v-uiv-tooltip` or `v-uiv-popover` are provided. Remember to register uiv as a plugin (`app.use(uiv)`) for these directives to be globally available. If only specific components are imported, directives will not be automatically registered.

fix

Always call `app.use(uiv)` if you intend to use any of the provided directives. If you need to use directives without global registration, you may need to import and register them locally (refer to uiv documentation for specific directive imports).

affects: >=0.x

Errors

Common errors & fixes

Failed to resolve component: uiv-modal

The uiv library or a specific component was not correctly registered with the Vue application.

fix

Ensure you have `app.use(uiv)` in your main application entry point (e.g., `main.js`) if you are using global registration. Alternatively, if importing individual components, make sure they are properly imported and registered locally or globally.

TypeError: Cannot read properties of undefined (reading 'use')

`app` is not a valid Vue 3 application instance, or you are trying to use `app.use()` on a Vue 2 instance or a non-Vue object.

fix

Confirm you are creating your Vue application with `createApp()` (Vue 3) and that `app` refers to the return value of this function, e.g., `const app = createApp(App)`.

Uncaught TypeError: $(...).tooltip is not a function

This error typically indicates that jQuery and Bootstrap's JavaScript (which depends on jQuery for its components like tooltips) are not loaded or initialized, but uiv does not depend on them. If you see this error, it's likely from *another* Bootstrap-related library or custom script, not uiv itself. uiv is jQuery-free.

fix

This error is generally NOT related to `uiv`. If you encounter it, check if you have other Bootstrap-related JavaScript libraries or custom scripts that mistakenly expect jQuery and Bootstrap's JS. uiv components are implemented natively in Vue.

Upgrade

Version history

2.0.6latest on npm

Audit

Dependencies

vuerequireduiv is a component library built for Vue.js and requires Vue 3 as a peer dependency.

bootstraprequiredWhile uiv implements Bootstrap's *components*, it relies on Bootstrap's CSS for styling. You must manually import Bootstrap's CSS.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/uiv-lib/uiv ↗

packagehttps://www.npmjs.com/package/uiv ↗

homepagehttps://ui-vue.github.io ↗