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?
Sense4
priority
answered 2 months 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 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.
Grzegorz Bujański
staff
answered 2 months 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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