nuxtjs, bootstrap-vue with custom bootstrap build

_Instructions.md

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:

7. Use app2.scss to only import css you need.
8. 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.

app.scss

// Option A: Include all of Bootstrap

// Customizations
$body-bg: #000;
$body-color: #111;

// All of bootstrap
@import "node_modules/bootstrap/scss/bootstrap";

app2.scss

// 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";

nuxt.config.js

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

package.json

{
  "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"
  ]
}

postcss.config.js

// 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': { }
  }
}

Thanks man, this helps!

Hi, Can you give me some example for your last mention that

even just load per component in your own components as needed with import.

I want to use bootstrap components per file not globally.

option 2 is still load all components what I selected however, some vue component doesn't need everything...

why do you need bootstrap-vue? cant you just install bootstrap without any additions and do this exact thing? i want to add bootstrap but without its boostrap-vue since I am using another design system called argon which requires bootstrap as a dependency

@slidenerd, in your case you don't need bootstrap-vue. This guide is for those that are using bootstrap-vue as their component library.

do a favor for yourself and don't use this tutorial since @nuxtjs/bootstrap-vue has been deprecated

@thamerbelfkihthamer, bit harsh. How about adding something constructive like some suggestions on what is the latest way to do it?

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.