Customize

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`,
  },
  extend: {
   prefix: '',
  },
  unocss: {
   prefix: 'un',
  },
  scss: {
   disabled: false,
  },

 },
});

The first step in application customization is to set the theme colors.

Please save the Sass file in the assets folder.

$primary: #00bb8e;

Fonts can be configured just like theme colors.

In the case of Google Fonts, they are automatically loaded by the module.

$primary: #00bb8e;
$headings-font-family:  "Noto Sans" ;

Edit the nuxt.config.ts file to include the Sass file you created.

To include additional Sass files, simply add the file path after usebootstrap.

You can use Vue’s SFC CSS feature to apply styles partially.

Vue SFC CSS

<template>
 <div>
  Element Content
 </div>
</template>

<style scoped>
  div {
    background-color: red
  }
</style>