Adding MDB Plugins using Laravel and VITE

Topic: Adding MDB Plugins using Laravel and VITE

Sense4 priority asked 2 months 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?

Add comment

Sense4 priority answered 2 months ago

0 0 Best answer

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 1 month 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.

Add comment

Grzegorz Bujański staff answered 2 months ago

0 0 Best answer

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

For egzample:

<code>mdb-ui-kit.js</code>:

<pre class="prettyprint"><code>import * as mdb from 'mdb-ui-kit';
const { Animate, Chip, ChipsInput, Input, Ripple, initMDB} = mdb;
initMDB({ Animate, Chip, ChipsInput, Ripple, Input});
window.mdb = mdb;
</code></pre>

<code>plugins.js</code>:

<pre class="prettyprint"><code>import 'mdb-ui-kit/plugins/js/all.min.js'
</code></pre>

<code>main.js</code>:

<pre class="prettyprint"><code>import '../scss/styles.scss';

import './mdb-ui-kit.js'
import './plugins.js'
</code></pre>

And if you want to use <code>mdb</code> UMD, you can import the UMD file directly:

<code>mdb-ui-kit.js</code>:

<pre class="prettyprint"><code>import * as mdb from 'mdb-ui-kit/js/mdb.umd.min.js';
window.mdb = mdb;
</code></pre>

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

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

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

Sense4

27Support score
8Questions 3Answers 1Snippets