Topic: Adding MDB Plugins using Laravel and VITE

Sense4 priority asked 2 weeks ago


Plugins such as Calendar and/or WYSIWYG editor to work. I use laravel and VITE to import the modules in general. It works most of the time but not for plugins.

app.js works well to import things like

import { Animate, Chip, ChipsInput, Input, Ripple, initMDB} from 'mdb-ui-kit';
initMDB({ Animate, Chip, ChipsInput, Ripple, Input});

But when wanting to import plugins it seems like I need to use the UMD import to get things to work. While doing so I always get that the mdb is not defined in the plugins all.js file. It also seems messy to use both ES and UMD imports in my code when using laravel and vite.

The css is imported though my app.scss file and it also works quite well in general.

How would I import plugins into my laravel project and still get the mdb definition to work while combining both ES and UMD modules? How should I approach the issue with plugins while using laravel and vite?


Sense4 priority answered 2 weeks ago


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?


Grzegorz Bujański staff commented 2 weeks ago

In this case, you need to import individual plugins.

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;

Unfortunately, at the moment it is not possible to use custom JS when adding plugins via NPM and the all.min.js file.


Grzegorz Bujański staff answered 2 weeks ago


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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.3.2
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No