Nuxt.js: bootstrap-vue/nuxt do not load bootstrap default css as mentioned in getting started

[jhalmu]

Version

v2.4.3

Reproduction link

https://bootstrap-vue.js.org/docs/

Steps to reproduce

I don know

What is expected ?

Add bootstrap-vue/nuxt to modules section of nuxt.config.js.

This will include both boostrap.css and bootstrap-vue.css default CSS.

What is actually happening?

Have to add them to CSS section manually

Additional comments?

Thanks

_{This bug report is available on Nuxt community (#c8674)}

[vadxq]

I have the same question in v2.4.3.
And I want use module and plugins to solve it.
https://nuxtjs.org/guide/modules

plugin.js

import Vue from 'vue' import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm'
Vue.use(BootstrapVue)

module.js
import path from 'path'
export default function nuxtBootstrapVue (moduleOptions) {
// Registerplugin.jstemplate this.addPlugin(path.resolve(__dirname, 'plugin.js'))
`}

nuxt.config.js
modules: [
'~/modules/module' ],

I found a code very similar to the above code in node_modules/bootstrap-vue/nuxt.

-----update ---------
emmmmm, So what is the reason
SyntaxError Unexpected token {

[willi-dev]

i also try install nuxt with bootstrap...
but no bootstrap css loaded..

[manniL]

@jhalmu That sounds more like a bug with the nuxt module itself instead of Nuxt. Please report it there ☺️
Related file: https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/nuxt/index.js

cc @pi0

[Javid-Izadfar]

I just opened an issue at bootstrap-vue

[solocao]

how can i do ，这就尴尬了

[sergiocamillo]

For me worked when install the bootstrap-vue as plugin. Like a bellow:
For VUE CLI 3
1) Install bootstrap-vue
npm i bootstrap-vue

2) Create a file in plugins folder -> bootstrap-vue.js

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

3) Edit nuxt.config.js.

const path = require('path')
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'bootstrap-components': path.resolve(__dirname, 'node_modules/bootstrap-vue/es/components')
      }
    }
  },
  plugins: [
    '~/plugins/bootstrap-vue'
],
}

[sergiorivas]

I did a similar solution but without webpack and it worked for me.

1. Install bootstrap-vue

npm i bootstrap-vue

1. Create the file plugins/bootstrap-vue.js

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

1. Add the plugin to nuxt.config.js

  ...
  plugins: [
    '@/plugins/bootstrap-vue',
  ],
  ...

[natuanorg]

Thanks @sergiorivas ! it worked for me

[ludo1960]

Not working for me @sergiorivas

[sergiocamillo]

@ludo1960 Did you try configuring webpack ?

For me worked when install the bootstrap-vue as plugin. Like a bellow:
For VUE CLI 3

Install bootstrap-vue
npm i bootstrap-vue

Create a file in plugins folder -> bootstrap-vue.js

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Edit nuxt.config.js.

const path = require('path')
module.exports = {
configureWebpack: {
resolve: {
    alias: {
        'bootstrap-components': path.resolve(__dirname, 'node_modules/bootstrap-vue/es/components')
    }
  }
},
plugins: ['~/plugins/bootstrap-vue'],
}

[asapdotid]

from @sergiocamillo updated for Nuxt Js 2.9.1 (use webpack 4)

1. Install Bootstrap-vue.

yarn add bootstrap-vue

2. Create file on plugin folder for setup bootstarp-vue.

Example create file: bootstrap-vue.client.js (only client process)

plugins: [,
    '~/plugins/bootstrap-vue.client',
  ],

or create file: bootstrap-vue.js (mode client)

plugins: [,
    { src: '~/plugins/bootstrap-vue', mode: 'client' }
  ],

_the file_

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

3. Modify Nuxt Js Config nuxt.config.js for Bootstrap-vue and add alias config webpack 4

export default {
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [,
    '~/plugins/bootstrap-vue.client',
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [,
    'bootstrap-vue/nuxt',
  ],
  /**
   * @var mixed bootstrapVu
   */
  bootstrapVue: {
    bootstrapCSS: false, // here you can disable automatic bootstrapCSS in case you are loading it yourself using sass
    bootstrapVueCSS: false, // CSS that is specific to bootstrapVue components can also be disabled. That way you won't load css for modules that you don't use
    componentPlugins: [], // Here you can specify which components you want to load and use
    directivePlugins: [] // Here you can specify which directives you want to load and use. Look into official docs to get a list of what's available
  },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
      if (ctx.isClient) {
        // BootstrapVue and PortalVue require access to the global Vue reference (via import Vue from 'vue').
        config.resolve.alias['vue$'] = 'vue/dist/vue.esm.js'
      }
    }
  }
}