Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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': { }
}
}
@egistli

This comment has been minimized.

Copy link

@egistli egistli commented Mar 15, 2019

Thanks man, this helps!

@kangchals

This comment has been minimized.

Copy link

@kangchals kangchals commented May 15, 2019

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

@slidenerd

This comment has been minimized.

Copy link

@slidenerd slidenerd commented Mar 18, 2020

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

@benmccallum

This comment has been minimized.

Copy link
Owner Author

@benmccallum benmccallum commented Mar 20, 2020

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

@thamerbelfkihthamer

This comment has been minimized.

Copy link

@thamerbelfkihthamer thamerbelfkihthamer commented Jun 12, 2020

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

@benmccallum

This comment has been minimized.

Copy link
Owner Author

@benmccallum benmccallum commented Jun 17, 2020

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

@benmccallum

This comment has been minimized.

Copy link
Owner Author

@benmccallum benmccallum commented Jun 17, 2020

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
You can’t perform that action at this time.