bootstrap-components

Installation

npm install @cib/bootstrap-components

Note: This library requires Bootstrap 5.3.8+ as a peer dependency. Install it in your project:

npm install bootstrap

Usage

In your main application entry file (e.g., main.js):

import { createApp } from 'vue'
import App from './App.vue'

// Import Bootstrap CSS (once in your app)
import 'bootstrap/dist/css/bootstrap.min.css'

// Import the component library
import { registerComponents } from '@cib/bootstrap-components'
import '@cib/bootstrap-components/dist/bootstrap-components.css'

const app = createApp(App)

// Register all components
registerComponents(app)

app.mount('#app')

Alternative: Import individual components

import { BButton, BCard, BModal } from '@cib/bootstrap-components'

app.component('b-button', BButton)
app.component('b-card', BCard)
app.component('b-modal', BModal)

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm dev

Compile and Minify for Production

npm build

Publish as NPM library

npm publish

Run Unit Tests with Vitest

npm test:unit

Run End-to-End Tests with Cypress

npm test:e2e:dev

This runs the end-to-end tests against the Vite development server. It is much faster than the production build.

But it's still recommended to test the production build with test:e2e before deploying (e.g. in CI environments):

npm build
npm test:e2e

Lint with ESLint

npm lint