Feature: In nuxt, only import/register components/directives passed in module options

I’ve been able to setup a custom scss build for bootstrap to only include what I need, but I’m lacking an easy way to include in the JS build only the bootstrap-vue components I need so I can keep the bundle small.

The vue-bootstrap documentation > “Importing components and directives” shows how it’s possible for people in control of their webpack builds, but there’s no simple option for nuxt.

The only way I see right now is to remove module registration from nuxt.config.js (['@nuxtjs/bootstrap-vue', { css: false }]), and instead replicate the functionality of nuxt > index.js and plugin.js myself. I’d prefer the ability to do this declaratively by passing through the module options an array of components and another of directives by name to import and register globally.

I’ve been scouring the source of nuxt to see how/if the options defined for the module get passed from index.js (addPlugin) to plugin.js so I could take the arrays, import components/directives and register them with Vue globally. I’m just not sure how that’d work. Docs here > Template plugins seems to allude to needing lodash templates.

Anyone think this is useful and if it’s possible?

Thanks, Ben

[webkonstantin]

I had success setting up plugin like this

import Vue from 'vue'

if (process.server) {
  // Use full compiled version for ssr
  Vue.use(require('bootstrap-vue'))
} else {
  // Include only what you need for client
  // Note that you need to get .default from required module
  Vue.component('b-modal', require('bootstrap-vue/es/components/modal/modal').default)
}

[benmccallum]

Hi @pi0, thanks for jumping in here. Are you saying we can achieve importing only the bootstrap-vue components we need by following what was done in the lodash plugin? Got a link?