Adding MDB Plugins using Laravel and VITE

Plugins require MDB to work. So you need to add window.mdb = mdb in your code. But unfortunately you can't do it in one file, because even if you first add the mdb to window and then import the plugins, the import will always be done first - before adding the mdb to window. But, you can create separate file to import mdb ES and separate for plugins

For egzample:

mdb-ui-kit.js:

import * as mdb from 'mdb-ui-kit';
const { Animate, Chip, ChipsInput, Input, Ripple, initMDB} = mdb;
initMDB({ Animate, Chip, ChipsInput, Ripple, Input});
window.mdb = mdb;

plugins.js:

import 'mdb-ui-kit/plugins/js/all.min.js'

main.js:

import '../scss/styles.scss';

import './mdb-ui-kit.js'
import './plugins.js'

And if you want to use mdb UMD, you can import the UMD file directly:

mdb-ui-kit.js:

import * as mdb from 'mdb-ui-kit/js/mdb.umd.min.js';
window.mdb = mdb;

The plugins.js and main.js files for UMD will look the same as for ES import

Thank you so much for you reply.

I got it to work a lot better but still having minor issues left when it comes to importing custom javascript such as in the plugins Mentions and/or Organization Charts.

How would I best approach it in my laravel project to add the custom javascript code to make these plugins work?

import Mention from 'mdb-ui-kit/plugins/js/mention.min.js'
import OrganizationChart  from 'mdb-ui-kit/plugins/js/organization-chart.min.js'

window.Mention = Mention;
window.OrganizationChart = OrganizationChart;