Skip to content

Instantly share code, notes, and snippets.

@benmccallum
Last active July 25, 2021 03:35
Show Gist options
  • Save benmccallum/33ff008660218a578fc27fd33f51d1c1 to your computer and use it in GitHub Desktop.
Save benmccallum/33ff008660218a578fc27fd33f51d1c1 to your computer and use it in GitHub Desktop.
nuxtjs, bootstrap-vue with custom bootstrap build

Important! This guide is out of date (circa 2017) and should no longer be used. For the latest advice, please refer to the BootstrapVue docs and their Nuxt.js module. https://bootstrap-vue.org/docs#nuxt-js

General setup:

  1. Install bootstrap as a dev dependency, and its dependencies (node-sass and sass-loader) npm install --save-dev bootstrap@4.0.0-beta.2 node-sass sass-loader

  2. Install nuxt plugin of bootstrap vue (includes bootstrap-vue as a dependency) npm install @nuxtjs/bootstrap-vue

  3. Register plugin as module in nuxt.config.js (see below)

  4. Create app.scss entry point (see below)

  5. Add app.scss entry point file to css setting in nuxt.config.js (see below)

  6. Configure postcss:

    • Create a postcss.config.js file next to package.json (repo root) (see below)
    • Update package.json with supported browsers list as per what bootstrap or yourself use (see below)
    • Install those plugins for dev build: npm install --save-dev precss autoprefixer

Optimizations:

  1. Use app2.scss to only import css you need.
  2. Don't use module registration/plugin installer, simply call Vue.component/Vue.directive on things you want, or even just load per component in your own components as needed with import.
// Option A: Include all of Bootstrap
// Customizations
$body-bg: #000;
$body-color: #111;
// All of bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
// Option B: Include parts of Bootstrap
// Customizations
$body-bg: #000;
$body-color: #111;
// Required
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
// Optional
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";
module.exports = {
css: [
'@/assets/scss/app.scss' // use our build, as entered via app.scss
],
modules: [
['@nuxtjs/bootstrap-vue', { css: false }] // don't include a default build, use ours
]
}
{
"dependencies": {
"@nuxtjs/bootstrap-vue": "^2.0.4"
},
"devDependencies": {
"autoprefixer": "^7.2.3",
"bootstrap": "^4.0.0-beta.2",
"node-sass": "^4.7.2",
"precss": "^2.0.0",
"sass-loader": "^6.0.6"
},
"browserslist": [
"Chrome >= 45",
"Firefox ESR",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
}
// This will be merged with Nuxt's defaults as you can see in their source:
// https://github.com/nuxt/nuxt.js/blob/c55df0796832339f6c132fb76a266acc6b9f249b/lib/common/options.js#L94
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
'plugins': {
'precss': { },
'autoprefixer': { }
}
}
@benmccallum
Copy link
Author

I've added a note in the header marking it as out of date and to use BootstrapVue's docs on their nuxt.js module. Should avoid any confusion in the future.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment