# uiv: Bootstrap 3 components rebuilt as Vue components

> uiv reimplements the Bootstrap 3 component set in Vue, including the interactive behaviour, so a Vue application can use Bootstrap 3 markup without Bootstrap's own JavaScript. The 2.x line targets Vue 3, ships about 20KB gzipped with no stylesheet of its own, and is distributed as an npm package with UMD and ES module builds.

**wxsms/uiv** — Bootstrap 3 components implemented by Vue.js.

- Repository: https://github.com/wxsms/uiv
- Website: https://wxsms.github.io/uiv/
- Stars: 937 · Forks: 182
- Language: JavaScript
- License: MIT
- Published: 2026-10-20 · Updated: 2026-10-20 · Language: en
- Canonical page: https://hysenlabs.com/projects/wxsms-uiv

## Bootstrap 3 behaviour, Vue implementation

uiv is described plainly as a Bootstrap 3 component lib implemented by Vue, and that single sentence contains the whole design. Bootstrap 3 shipped its interactive behaviour as jQuery plugins, which is exactly the part that fights a modern component framework: a dropdown or a modal becomes a DOM imperative rather than a state your application owns. uiv re-expresses those components as Vue components, so the same Bootstrap 3 markup and class names are driven by Vue reactivity instead of by jQuery event wiring. The audience is therefore narrow but real: teams that already have a Bootstrap 3 design system, or existing markup they do not want to rewrite, and who need that look inside a Vue 3 application or a server-rendered site. The repository carries a `CLAUDE.md` file, a `docs/` tree served by VitePress, a `build/` directory for the distribution pipeline and `src/` for the components, with the package published to npm as `uiv` and the documentation site at wxsms.github.io/uiv.

## No stylesheet of its own

The README lists three properties under lightweight, and the second one is the one that changes how you integrate the library: there is no extra CSS file. The first is size, with all components around 20KB gzipped. The third is that individually import is supported, so an application can pull in only the components it uses rather than registering the whole set. The absence of a stylesheet is a deliberate architectural position. uiv does not ship Bootstrap's CSS, it consumes it: the quick start imports `bootstrap/dist/css/bootstrap.min.css` directly, and uiv contributes only the JavaScript side, the Vue components that implement Bootstrap 3 behaviour. The consequence is that your styling pipeline stays exactly as it was, you keep one copy of Bootstrap's CSS, and the visual result matches Bootstrap 3 by construction because it is Bootstrap 3's own stylesheet doing the work. The trade is that uiv inherits Bootstrap 3's look and its class names entirely, with no styling layer of its own to override or theme.

## Registering the plugin, one component or the whole set

Installation is a single npm command:

```bash
$ npm i uiv --save
```

The quick start then wires the library into the Vue application. Because uiv exports its components as a namespace, the typical registration is a single `app.use` call:

```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(...)
```

Three details in that snippet are worth noting. The Bootstrap CSS import comes first and is your responsibility, since the library ships none. The namespace import means `app.use(uiv)` registers everything, which is the simplest path and the one the README documents. The individually import support means the alternative is to import the components you actually use and register them one by one, which is what the size claim is aimed at. The `package.json` publishes both module formats, with `main` pointing at the UMD bundle and `module` at the ES module bundle, and an `exports` map that resolves `import` to the ES build and `require` to the UMD build, so both bundler and CommonJS consumers are covered.

## Server-side rendering is a first-class claim

The README lists SSR, server-side rendering, as supported, alongside Vue 3 support. For a component library that has to work inside a server-rendered application, that claim carries more weight than it does for a plugin that only ever runs in the browser, because a component that touches `window` or `document` during setup will break the server render. The uiv position is that its components are usable in that context, and the design of a Vue component library around state rather than DOM mutation is what makes it plausible. This is also the practical reason the 2.x line exists. The version table in the README maps uiv 2.x to Vue 3, uiv 1.x to Vue 2 and uiv 0.x to Vue 2, each with its own documentation site. The 2.x documentation lives at wxsms.github.io/uiv, the 1.x and 0.x documentation remain hosted at separate addresses for older projects. So the library is versioned in step with Vue, and picking the uiv major version follows directly from the Vue major version in use.

## A pnpm workspace with VitePress docs and Vitest tests

The repository is a modern JavaScript project and the tooling shows it. The `package.json` declares `pnpm@12.10.1` as its package manager, and the tree contains a `pnpm-lock.yaml` and a `pnpm-workspace.yaml`, so local development is pnpm based rather than npm based even though npm is fine for consumers. Documentation is built with VitePress, through `docs:dev` running `vitepress dev docs` and `docs:build` running `vitepress build docs`, and the `start` script simply delegates to the dev script. The distribution build is `vite build -c build/vite.config.js` followed by `node build/single.js`, which is how the single-file UMD bundle in `dist` is produced. Tests run through Vitest with coverage, `vitest run --coverage`, and linting uses ESLint across `src`, `build` and the docs config with a Prettier config and plugin for formatting. The default branch is `dev`, with release notes published per release in the repository's releases.

## Bootstrap 3 is the boundary of this library

The honest limitation is the one the name implies. uiv is bound to Bootstrap 3, and nothing in the project suggests a Bootstrap 4 or 5 component set. For a team standardising on a later Bootstrap generation, uiv is the wrong tool, not because its components are weak but because its class names, markup expectations and behaviour all describe an older framework generation. The second limitation is narrower and easier to handle: because there is no CSS file of its own, you are committing to Bootstrap 3's stylesheet for every component you use, and customising a uiv component visually means overriding Bootstrap's classes rather than configuring a component API. A third point is about how the library is versioned. The npm version tracks the Vue major, so a project on Vue 2 needs uiv 1.x or 0.x, which means two ecosystems of documentation and no single upgrade path across a mixed Vue 2 and Vue 3 organisation. The README also points to the getting started page in the documentation for detail beyond the quick start snippet, so the quick start is a starting point rather than the full usage contract.

## Conclusion

uiv fits teams with an existing Bootstrap 3 design system that now need Vue 3 or server-side rendering without rewriting markup, and who want per-component imports to keep bundle size down. It does not fit projects standardising on a newer Bootstrap generation, because uiv targets Bootstrap 3 specifically, and it is not a general component library outside that grid. Before adopting it, confirm your designs are still on Bootstrap 3, check that the components you need exist in the 2.x documentation at wxsms.github.io/uiv, and remember that the default branch is dev while the published release is v2.0.7 from 2026-09-09, with the last push on 2026-10-18.

## FAQ

### How do I install uiv in a Vue 3 project?

Run npm i uiv --save, import 'bootstrap/dist/css/bootstrap.min.css' in your main file, then register the library with app.use(uiv) after importing * as uiv from 'uiv'. Bootstrap's stylesheet is required because uiv ships no CSS of its own.

### Which Vue version does the current uiv release support?

The 2.x line of uiv targets Vue 3, and uiv 1.x and 0.x targeted Vue 2. Each line has its own documentation site, with the 2.x docs at wxsms.github.io/uiv.

### Does uiv support server-side rendering?

Yes. The README lists SSR, server-side rendering, as supported alongside Vue 3 support and individually import for components.

## Sources

- [License: MIT](https://github.com/wxsms/uiv/blob/dev/LICENSE)
- [Project website](https://wxsms.github.io/uiv/)
- [README](https://github.com/wxsms/uiv/blob/dev/README.md)
- [Releases](https://github.com/wxsms/uiv/releases)
- [wxsms/uiv on GitHub](https://github.com/wxsms/uiv)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/wxsms-uiv