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