{"id":12272,"library":"uiv","title":"uiv: Bootstrap 3 Components for Vue 3","description":"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.","status":"active","version":"2.0.6","language":"javascript","source_language":"en","source_url":"https://github.com/uiv-lib/uiv","tags":["javascript","Bootstrap","Bootstrap 3","Bootstrap for Vue","SSR","Web","Components","Directives","Vue"],"install":[{"cmd":"npm install uiv","lang":"bash","label":"npm"},{"cmd":"yarn add uiv","lang":"bash","label":"yarn"},{"cmd":"pnpm add uiv","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"uiv is a component library built for Vue.js and requires Vue 3 as a peer dependency.","package":"vue","optional":false},{"reason":"While uiv implements Bootstrap's *components*, it relies on Bootstrap's CSS for styling. You must manually import Bootstrap's CSS.","package":"bootstrap","optional":false}],"imports":[{"note":"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.","wrong":"const uiv = require('uiv')","symbol":"* as uiv","correct":"import * as uiv from 'uiv'"},{"note":"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.","wrong":"import Modal from 'uiv/components/modal'","symbol":"Specific Component (e.g., Modal)","correct":"import { Modal } from 'uiv'"},{"note":"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.","wrong":"import 'uiv/dist/uiv.min.css'","symbol":"Bootstrap CSS","correct":"import 'bootstrap/dist/css/bootstrap.min.css'"},{"note":"uiv ships with TypeScript definitions, allowing for type-safe usage of its components and utility types.","symbol":"Types (for TypeScript)","correct":"import type { DropdownOption } from 'uiv'"}],"quickstart":{"code":"import 'bootstrap/dist/css/bootstrap.min.css'\nimport { createApp, h } from 'vue'\nimport * as uiv from 'uiv'\n\nconst App = {\n  template: `\n    <div class=\"container\">\n      <h1>uiv Example</h1>\n      <button type=\"button\" class=\"btn btn-primary\" @click=\"showModal = true\">\n        Open Modal\n      </button>\n      <uiv-modal v-model=\"showModal\" title=\"Hello uiv!\" @hide=\"onModalHide\">\n        This is a simple modal dialog using uiv components. Ensure Bootstrap CSS is imported!\n        <template #footer>\n          <button type=\"button\" class=\"btn btn-default\" @click=\"showModal = false\">Close</button>\n          <button type=\"button\" class=\"btn btn-primary\" @click=\"showAlert\">Do Something</button>\n        </template>\n      </uiv-modal>\n    </div>\n  `,\n  data() {\n    return {\n      showModal: false\n    }\n  },\n  methods: {\n    onModalHide() {\n      console.log('Modal was hidden')\n    },\n    showAlert() {\n      alert('Action taken!')\n      this.showModal = false\n    }\n  }\n}\n\nconst app = createApp(App)\napp.use(uiv)\napp.mount('#app')","lang":"typescript","description":"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."},"warnings":[{"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.","message":"uiv 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.","severity":"breaking","affected_versions":">=2.0.0"},{"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).","message":"uiv 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.","severity":"gotcha","affected_versions":">=0.x"},{"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.","message":"The `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.","severity":"gotcha","affected_versions":">=2.0.6"},{"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).","message":"Directives 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.","severity":"gotcha","affected_versions":">=0.x"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The uiv library or a specific component was not correctly registered with the Vue application.","error":"Failed to resolve component: uiv-modal"},{"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)`.","cause":"`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.","error":"TypeError: Cannot read properties of undefined (reading 'use')"},{"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.","cause":"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.","error":"Uncaught TypeError: $(...).tooltip is not a function"}],"ecosystem":"npm"}