Configuration
In use-bootstrap, there are two types of components, HTML components and Bootstrap components, each of which can be prefixed with a component name.
tsnuxt.config.ts
export default defineNuxtConfig({
modules: [
'usebootstrap',
],
usebootstrap: {
scss: true,
bootstrap: {
prefix: ['', 'B'],
},
html: {
prefix: 'B',
},
icon: {
prefix: 'B',
},
extend: {
prefix: ['', 'B'],
},
spec: {
prefix: ['', 'B'],
},
unocss: {
prefix: 'un',
},
image: true,
fonts: true,
sitemap: true,
robots: true,
shiki: true,
leaflet: true,
mdc: true,
tiptap: true,
vueuse: {
prefix: '',
},
pwa: true,
aos: true,
echarts: true,
dynamicRoute: {
prefix: '',
defaults: {
lang: 'en',
},
},
swiper: {
prefix: '',
},
integration: {
prefix: '',
},
},
});
Sass
Theme colors
The first step in application customization is to set the theme colors.
Please save the Sass file in the assets folder.
scssassets/scss/_variables.scss
$primary: #00bb8e;
Fonts
Fonts can be configured just like theme colors.
In the case of Google Fonts, they are automatically loaded by the module.
scssassets/scss/_variables.scss
$primary: #00bb8e;
$headings-font-family: "Noto Sans" ;
Edit the nuxt.config.ts file to include the Sass file you created.
tsnuxt.config.ts
Additional Sass files
To include additional Sass files, simply add the file path after usebootstrap.
tsnuxt.config.ts
Vue SFC CSS
You can use Vue’s SFC CSS feature to apply styles partially.
Element Content
vue
<template>
<div>
Element Content
</div>
</template>
<style scoped>
div {
background-color: red
}
</style>