Nuxt.js: The proper way to include Bootstrap in Nuxtjs?

[MX48Live]

I try a couple way, but the most way it work for me is add a Link in Meta.

But, I just think how to make it even more better, such as install by NPM or something.

I try a lot of methods that they say out there, But It seem not work for me.

There is anyone can give me example?

especially Bootstrap 4 that require jQuery and Popper.js

Thank you

_{This question is available on Nuxt.js community (#c1258)}

[arenddeboer]

Why don't you try https://bootstrap-vue.js.org/ this is a vuejs2 version of bootstrap 4
I'm using this with the latest nuxt and it works great. No need for jquery (even though I use that too)
You can use this nuxt module: https://www.npmjs.com/package/@nuxtjs/bootstrap-vue

[benmccallum]

Hey @arenddeboer, do you use a customized build of the css? I want to be able to change some of the global variables for theme colors and so no. Wondering what the best way to do that is with @nuxtjs/bootstrap-vue. I see here that you should pass css: false in with the module registration to avoid the module adding the standard bootstrap css build, but then there is no further advice.

[arenddeboer]

No expert, and no longer using nuxt.js (just a modified version of the vue ssr hackernews clone) But I guess it must be similar.

Make sure you no longer import the default bootstrap css, which is probably already done by passing css: false to the module registration as you mentioned.
Then in my App.vue I have:

<style lang="scss">
  @import './assets/scss/app.scss';
</style>

inside app.scss I have:

@import "bootstrap-variable-override";
@import "~bootstrap/scss/bootstrap.scss";

In the same directory as app.scss I have a file '_bootstrap-variable-override.scss'
Which in my case contains:

$theme-colors: (
    "dark": #001434,
    "light": #d8dc96,
    "muted": #d8dc96,
    "white": #FFFFFF,

    "primary": #7ca249,
    "secondary": #d8d661,
    "danger": #36ff40,
    "success": #36ff40,
    "warning": #36ff40,
    "info": #36ff40
  );



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

This will compile all bootstraps scss I think on every change and might slow the compilation down a bit. If you get comfortable with it, you can just override the colors and not recompile everything but I haven't put enough time into it to get to the nitty-gritty details. Hope this works for you too.

Edit:
For this to work you will also need to inform webpack to compile scss, not sure if nuxt includes this.
In my webpack.base.config.js in module->rules[]:

      {
        test: /\.scss?$/,
        loaders: ['css-loader', 'sass-loader']
      },

[benmccallum]

Awesome, thanks mate. Yea that's similar to how I've done it in another app. I was thinking of trying the build > css nuxt config setting and passing it an app.scss like you're doing. Sucks to slow down your build and to end up with compiled assets that are quite large and cannot be CDNd like a plain bootstrap build but I just can't see any other way to customise easily. It'd be impossible to override colors and the like over all the places the variables are used.

On a side note, why the move away from nuxt? Overkill for your needs? Be interested to hear from someone who's built something fairly large with it.

[arenddeboer]

I needed more flexibility in my routing. Nuxt.js is great if you can live with the directory = url way of doing things. I for instance need to change the url based on user language (without a language prefix). I also have places where I need multiple optional url segments. These things were not possible to my knowledge at the time I decided to switch. In short nuxt.js is a fantastic project that makes it possible to get started fast, but I was afraid that once the project grows, the behind the scenes "magic" will work against you. Another added advantage is that I now have a deeper understanding of how vue, webpack and server-side rendering works.

[benmccallum]

Thanks for the pointers, and the tip on that example repo you've been using. Looks like a nice foundation also. What I ended up with is here: https://gist.github.com/benmccallum/33ff008660218a578fc27fd33f51d1c1

My only uncertainty now is whether I should be using the css configuration property in nuxt.config.js or index.vue to import my app.scss. Docs say "Nuxt.js lets you define the CSS files/modules/libraries you want to set globally (included in every page)." I wonder if there's a difference and how they are added. I'd want it to be cacheable (not inlined) and optimized.

[arenddeboer]

I hope someone more knowledgeable can step in and answer your question

[Blemming]

@arenddeboer Just a smal FYI for the custom routes, this allows you to create custom routes :)

[arenddeboer]

Thanks @Blemming looks like an awesome option.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.