SkimpleComponents is my personal components library built on Bootstrap and designed to be used with Nuxt 3.
BootstrapVue has been abandoned
(well, was abandoned) and I needed a drop-in
replacement. So here is it !
Keep in mind that it's just a personal library : it is not meant to be complete nor a full replacement.
First, install this library.
npm i skimple-components
In your nuxt.config.ts
, add the skimple-components/nuxt
module :
modules: [
// Your modules here.
// ...
'skimple-components/nuxt'
]
And that's it. Feel free to browse available components here.
By default, SkimpleComponents includes Bootstrap with these options.
But you're free to customize it ! First, create your an app.scss
file (in your assets
folder)
containing these lines :
// Include all of Bootstrap
// Include any default variable overrides here (though functions won't be available)
// For example :
// $primary: #212529;
@import '~bootstrap/scss/bootstrap';
// Then add additional custom code here
// For example :
// @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
// ...
Feel free to not import all Bootstrap files (see instructions here).
Then add the app.scss
to the nuxt.config.ts
:
css: [
'~/assets/app.scss'
]
And disable the automatic Bootstrap CSS import via the nuxt.config.ts
:
skimpleComponents: {
bootstrapCss: false
}
Et voilĂ !
You can disable the automatic Bootstrap JS import as well as Bootstrap icons if you don't use them :
skimpleComponents: {
bootstrapCss: false,
bootstrapJs: false,
icons: false // `SkiIcon` component will stop working.
}