Quick start

use-bootstrap is the front-end framework based on Nuxt3 and Bootstrap5.

On this page

Installation

Create nuxt-app

npx nuxi@latest init project-name

Installation of use-bootstrap NPM Package

npx nuxi@latest module add usebootstrap

Configuration

We use Bootstrap5 SCSS in use-bootstrap.

Customize SCSS Customize first and import Bootstrap5 CSS as necessary.

In use-bootstrap, there are two types of components, HTML components and Bootstrap components, each of which can be prefixed with a component name.

export default defineNuxtConfig({
  modules: [
    'usebootstrap'
    ],
  usebootstrap: {
    bootstrap: {
      prefix: ``
    },
    html: {
      prefix: `B`
    },
  },
  css: [
    "bootstrap/scss/bootstrap.scss"
  ]
})