Using Plugins with Vue 3 and MDB5 Pro Advanced

Hm, Premium Support and no answer in 11-12 hours? With all of the problems that we had logging in and what not initially, I am starting to think this purchase was not worth it.

Okay, I have it working if I import the plugin directly in my component however, I would like to just import all of the plugins using "node_modules/mdb-ui-kit/plugins/js/all.min.js" but when I do, I get the following error:

Uncaught ReferenceError: mdb is not defined

The line that causes this in "main.js" is:

import * as plugins from 'mdb-ui-kit/plugins/js/all.min'

And adding the following does not help either:

import * as mdb from 'mdb-ui-kit'

window.mdb = mdb

I also have it working if I do this in "main.js"

import * as mdb from 'mdb-ui-kit'
import Countdown from 'mdb-ui-kit/plugins/js/countdown.min'

window.mdb = mdb
window.Countdown = Countdown

But this is annoying and it would be easier if I could just import all of the plugins. It seems like this is an issue with the "all.min.js" code. I would also like to point out that I cannot use the HTML with the data attributes and that I have to instantiate the plugin using Javascript.

Does NOT Work

<div data-mdb-countdown="31 December 2021 23:59:59" data-mdb-countdown-text-style="badge bg-primary"
  data-mdb-countdown-label-style="text-light bg-dark">
  <div class="countdown-unit countdown-days" data-mdb-countdown-label="days"></div>
  <div class="countdown-unit countdown-hours" data-mdb-countdown-label="hours"></div>
  <div class="countdown-unit countdown-seconds" data-mdb-countdown-label="minutes"></div>
  <div class="countdown-unit countdown-seconds" data-mdb-countdown-label="seconds"></div>
</div>

Does Work

<div id="countdown-element">
  <div class="countdown-unit countdown-days"></div>
  <div class="countdown-unit countdown-hours"></div>
  <div class="countdown-unit countdown-minutes"></div>
  <div class="countdown-unit countdown-seconds"></div>
</div>

const countdownExample = document.getElementById('countdown-element');
new Countdown(countdownExample, {
  countdown: "31 December 2021 23:59:59",
})

Are we supposed to have access to MDBVue with our license or is that extra? Come on support! Please reply! This is not looking like "Premium Support" if I have to wait more than 12 hours!

Yet another update. I have code that works using the data attributes now and initializing the countdown using Javascript. I am fine with this but I now need to know how to import all of the plugins instead of importing them individually. If I could just get that part to work, I would be all set!

Thank you.

Seeing how it has been more than 16 hours and we are supposed to have Premium Support yet we still have not heard back, if we do not get a response in the next 4 hours, we're going to charge back the purchase. This is ridiculous! People pay for Premium Support yet we do not hava an email / ticket system and still have to use the forums and even after waiting 16 hours, we still have no reply.

By the way, even the most basic of elements such as the input fields are not working correctly.

Code

<div class="form-outline">
  <input type="text" id="form1" class="form-control" />
  <label class="form-label" for="form1">Example label</label>
</div>

Error

Uncaught TypeError: can't access property "style", this._notchMiddle is null

I am not entirely sure what the deal is but I have imported the stylesheets and the Javascript libraries and I am still having major problems. Please respond ASAP!

Thank you.

Okay, after a few more hours and still no response, I have fixed the input fields. Apparently with Vue, the fields are not readily available when the code loads therefore, you have to execute some Javascript.

document.querySelectorAll('.form-outline').forEach((formOutline) => {
  new mdb.Input(formOutline).init();
});

This is extremely annoying so I need to find a better fix. I am thinking that having access to MDBVue would be the correct solution. Can someone, ANYONE, please let us know what it would cost to get access to MDBVue via NPM?

Thank you!

MDB Standard was not created to integrate with other frameworks (eg Vue). So this integration must be done at your own risk. You have to be aware that some things may not work as expected and making it work may not be easy.

If you want a package prepared to run on Vue, you need to buy MDB Vue: https://mdbootstrap.com/docs/b5/vue/pro/.