skimple-components

SkimpleComponents

SkimpleComponents is my personal components library built on Bootstrap and designed to be used with Nuxt 3.

Why this library ?

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.

How to use ?

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.

Customizing Bootstrap

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.
}