Topic: Getting MDBootstrap PRO working with VueJs 3

marek salzinger priority asked 2 months ago


Expected behavior

Step 1: Create a new VueJs project with

npm create vue@latest

Step 2: cd to Project folder and run

npm install

Step 3: Run

npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced

to install mdbootstrap pro to the Project

Step 4: Add the following two lines to your main.js

import 'mdb-ui-kit/css/mdb.min.css';

import 'mdb-ui-kit/js/mdb.es.min.js';

Step 5: Add a Pro component to your App.vue

<div class="alert alert-dismissible fade show" role="alert" data-mdb-alert-init data-mdb-color="warning">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-mdb-dismiss="alert" aria-label="Close"></button>
</div>

Actual behavior

The Components are not rendered correctly, it seems like there is CSS or JS missing inside the components, if i add the alert to the index.html it will render without any problems. But as soon as i add the alert to the App.vue it will break and seem like the Javascript is not executed since i cant clode the alert or neither does it have a background. I hope someone can help me fixing this issue.I made this working like 3 years ago, i not sure what VueJs version i was using back then, but i think it was version 2, the code is lost to time :(

Resources (screenshots, code snippets etc.)

main.js

package.json


Grzegorz Bujański staff answered 2 months ago


We have a dedicated version of MDB for the VUE package and we do not support the integration of MDB Standard with VUE.

You must carry out such integration on your own and at your own risk - we do not guarantee that everything will work properly.

In this case I see that you are using the es file, so you need to call alerts init.

import { Alert, initMDB } from 'mdb-ui-kit/js/mdb.es.min.js';
initMDB({Alert});

If you do this and the alerts still don't work properly, it's hard to say what's causing it.



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: Firefox
  • OS: Windows
  • Provided sample code: No
  • Provided link: No