Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
nuxtjs, vue-bootstrap with custom bootstrap build
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.
7. 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 commented Mar 15, 2019

Thanks man, this helps!

@kangchals

This comment has been minimized.

Copy link

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

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.