NuxtJS + BootstrapVue + TailwindCSS: Can I efficiently use Bootstrap Vue components but style with Tailwind CSS?

Question

I am creating an app and using Tailwind CSS for most of the design. However, there are a couple of components from BootstrapVue that I would like to use.

Is it possible to import some of the components such as the Form Tags component as a plugin ? If so, how can I optimize this so I can get the smallest file possible in NuxtJS? Would it be OK to perhaps use all of the BootstrapVue form components but style it with Tailwind CSS?

If you can provide an optimal method for tree shaking, importing, etc that would be fantastic!

Iman Shafiei · Accepted Answer · 2021-04-23 18:33:31Z

1

Yes, you can use shaking in bootstrap-vue in nuxt based on the documentation

I used this method in my project in the nuxt.config.js file:

bootstrapVue: {
    icons: false,
    componentPlugins: [
        'LayoutPlugin',
        'FormPlugin',
    ],
    components: ['BContainer', 'BRow', 'BCol' ],
    directives: ['VBModal', 'VBToggle', 'VBTooltip'],
},

Of course, you can put whatever you want in the config file.

answered Apr 23, 2021 at 18:33

Iman Shafiei

1,6471 gold badge17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

NuxtJS + BootstrapVue + TailwindCSS: Can I efficiently use Bootstrap Vue components but style with Tailwind CSS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related