Topic: Using Plugins with Vue 3 and MDB5 Pro Advanced

FarmFlight priority asked 2 years ago


We purchased a license for MDB Standard and are trying to use it with Vue 3. As we are a startup, we did not purchase MDBVue because we have to keep our costs down. I have successfully installed MDB via NPM however, I cannot figure out how to use plugins. I was just playing around with the Countdown plugin to see if I could get it to work. While there are no errors in the console, the Countdown does not load either.

package.json

  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "mdb-ui-kit": "git+https://oauth2:MY_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },

main.js

import * as mdb from 'mdb-ui-kit'
application.config.globalProperties.$mdb = mdb

stylesheet.scss

@import "../../node_modules/mdb-ui-kit/src/mdb/scss/mdb.core";
@import "../../node_modules/mdb-ui-kit/src/mdb/scss/mdb.free";
@import "../../node_modules/mdb-ui-kit/src/mdb/scss/mdb.pro";

App.vue

<template>
  <div class="container">
    <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>
  </div>
</template>

<script>
export default {
}
</script>

The page is simply blank with no errors in the console. I do know that the CSS is working fine because I added a quick little button that was styled correctly. I am not entirely sure what I am missing nor can I find anything via Google to help me out. I am a seasoned developer but this has me stumped. Any help is appreciated. Thank you!


Grzegorz Bujański staff answered 2 years ago


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/.


FarmFlight priority commented 2 years ago

Can you tell me how much additionally we would need to pay please?


FarmFlight priority commented 2 years ago

Hello? Can I get a response please? This is supposed to be PREMIUM SUPPORT with guaranteed answers. It looks like the pricing for MDBVue is the same. Can I have our subscription switched over to MBVue please? As quickly as possible?


Adam Jakubowski staff commented 2 years ago

Hello @FarmFlight,

The support forum is dedicated to technical questions.

All questions regarding MDB licensing, products, partnerships and other non-technical queries - it should be asked directly to contact@mdbootstrap.com

I've reached out to you via email address assigned to your mdbootstrap account.

Keep coding, Adam From MDB


FarmFlight priority answered 2 years ago


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!


FarmFlight priority answered 2 years ago


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.


FarmFlight priority answered 2 years ago


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.


FarmFlight priority answered 2 years ago


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!


FarmFlight priority answered 2 years ago


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",
})

FarmFlight priority answered 2 years ago


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

FarmFlight priority answered 2 years ago


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.


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.8.0
  • Device: Computer / PC
  • Browser: FireFox / Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: No
Tags