How to cherry-pick bootstrap-vue.js modules in nuxt.js?

Viewed 556

I am not able to understand how to cherry-pick bootstrap-vue.js modules in nuxt.js

The below code in nuxt.config.js is pulling entire library (excluding css) but as mentioned above how to include required modules.

modules: [
  ['bootstrap-vue/nuxt', { css: false }]
]

I referring docs here:

Things described in above docs are passing over my head :) Please help, thanks.

1 Answers

You dont need bootstrap-vue/nuxt module if u want to cherry pick modules. You need to to either just import and use components as described in 'Individual components and directives ' section. Or create a plugin file, where u register them globally.

 plugins: [
    '@/plugins/mybs',
  ],

And inside plugin

import Vue from 'vue'

import bModal from 'bootstrap-vue/es/components/modal/modal'
import bModalDirective from 'bootstrap-vue/es/directives/modal/modal'

Vue.component('b-modal', bModal);
Vue.directive('b-modal', bModalDirective);
Related