Nuxt.js + Bootstrap-Vue - Individual components and directives loading

Question

I'm working on integrating Bootstrap-Vue library into my Nuxt.js based project. I read through official documentation to get started but although importing bt-vue as a single module works fine, I would like to be able to import individual components and directives to reduce resulting file size and make my setup as afficient as possible. Documentation only provides a solution for a regular Vue.js project on this topic, but how can I write a plugin that would enable me to do the same with Nuxt?

I started with creating a bt-vue.ts plugin like so:

import Vue from 'vue'
import { Card } from 'bootstrap-vue/es/components';

Vue.use(Card);

I've imported this file into nuxt.config.js plugins section

plugins: [
...
'@/plugins/bt-vue'
...
]

but when I try to compile my project I recieve this error:

node_modules\bootstrap-vue\es\components\index.js:1
  (function (exports, require, module, __filename, __dirname) { import Alert from './alert';
  ^^^^^^

  SyntaxError: Unexpected token import
  at createScript (vm.js:80:10)
  at Object.runInThisContext (vm.js:139:10)
  at Module._compile (module.js:616:28)
  at Object.Module._extensions..js (module.js:663:10)
  at Module.load (module.js:565:32)
  at tryModuleLoad (module.js:505:12)
  at Function.Module._load (module.js:497:3)
  at Module.require (module.js:596:17)
  at require (internal/module.js:11:18)
  at r (C:\Projects\Wonder\frontend-nuxt\node_modules\vue-server-renderer\build.js:8330:16)
  at Object.bootstrap-vue/es/components (server-bundle.js:5771:18)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Module../plugins/bt-vue/index.ts (plugins/bt-vue/index.ts:1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Module../.nuxt/index.js (.nuxt/index.js:1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)

Answer 1

After a lot of research and some fixes to bt-vue lib I've found a solution to this challenge. This solution is intended for Nuxt 2 and won't work with Nuxt 1: First you will need to create a plugin:

import Vue from 'vue'
import Collapse from 'bootstrap-vue/es/components/collapse'
import Dropdown from 'bootstrap-vue/es/components/dropdown'

Vue.use(Collapse)
Vue.use(Dropdown)

We will import only those components that we want to use. More info on that can be found in bt-vue docs under Component groups and Directives as Vue plugins

WARNING: I suggest to stay away from such import syntax:

import { Modal } from 'bootstrap-vue/es/components';

since it will import everything inside components directive anyway and pollute your final bundle with additional JS code since it won't be tree-shaked properly(webpack bug) and this can brake the whole purpose of such setup, so use explicit imports as stated above.

then connect it in nuxt.config.js:

export default {
  build: {
    transpile: ['bootstrap-vue']
  },
  plugins: ['@/plugins/bt-vue']
}

As you can see there is no need to include a module since we are writing a plugin ourselves thus no problems with SSR! And we are using new Nuxt 2 transpile property to build our es6 bt-vue modules. Don't forget to include a reference to css since it comes separately. In my setup I just import SASS files from regular bootstrap package directly in my index.scss file and include it inside nuxt.config.js as usual.

css: [
    '@/assets/scss/index.scss'
  ]