Concept

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

On this page

Extended Bootstrap5 SCSS

With a built-in color generator, leveraging Bootstrap 5 CSS, to customize your application.

It corresponds to RFS.

Pure Vue.js Scripts

It is described by the script used Vue3 Composition API.

Bootstrap5 JavaScript and Popper.js are not used, and you don't need to include them.

Pure Components

use-bootstrap consists of properties set in the component, and is different from Bootstrap5 which consists of values set in the Class attribute or the Data attribute.

The Class attribute can accept any values, it is complicated and low on readability, and we cannot inspect the values.

The property of components is clear and the value is able to be inspected.

We are aiming for output to become identical with Bootstrap5.

SCSS of various Bootstrap5 templates can be used just as it is.

Clear property definition and parent-child relationship of components will make sense also crucial to an occasion using the dynamic rendering system and the CMS, WYSIWYG component mainly composed of data of JSON.

Flexible Property Specification

The Property attribute can be designated the value and expression by v-bind, and also the character string.

The numerical value, array(blank separator), and object(comma separator) can be used as the character string. Designation by the empty attribute is being supported.

Correspondence to UnoCSS , nuxt-link , nuxt-image and nuxt-icon

It corresponds to UnoCss by using the un-prefixed class attribute value.

It corresponds to nuxt-link by using the to-attribute.

It also corresponds to nuxt-image , nuxt-icon , nuxt-font , vue-use.

Animation support

The animation effect is being supported. Check the visual effect of the OS and browser and the setting of the animation effect to confirm the movement.

Moderate Abstraction and Automation

As the free layout is available like Bootstrap5, a component doesn't need a high level of abstraction; but a moderate level.

You can omit the ID for component. It is given automatically as necessary.If set manually, it will be able to accept events from non-descendant elements.

As far as it's possible, the role attribute and the area attribute are given automatically.

On this page