Topic: Using plain js version inside Vue, possible?

BigMonkey pro asked 1 year ago


Uncaught (in promise) TypeError: mdb.Alert.getInstance(...) is null

Is there something about the plain version of MDB5 which prevents component js from working inside Vue3?

I'm doing a simple testing with Alert component being triggered on button press and no matter what Alert.getInstance() method returns null. It's 100% being passed a valid element.


BigMonkey pro answered 1 year ago


Here is a working demo of the issue in a sandbox. It shows 2 different ways I'm attempting to call the hide() method on Alert obj.

https://codesandbox.io/s/elated-swirles-iviso?file=/index.html


Marcin Luczak staff commented 1 year ago

Beside calling alert.hide() instead of alrt.hide() in the first example, your code is fine. However, it will not work as Alert is a pro component and you are referencing the free version of our package. Does this also apply to your local application?


BigMonkey pro commented 1 year ago

Ah yes that was it, didn't realize even the base bootstrap Alert functionality, like show/hide, was a Pro feature. Seemed like the simplest component to test installation with.


Marcin Luczak staff commented 1 year ago

I'm glad that we've found the cause of the issue :)

Keep coding, Marcin


Michał Duszak staff answered 1 year ago


There is dedicated documentation for apps in Vue (see Alerts: https://mdbootstrap.com/docs/b5/vue/components/alerts/).


BigMonkey pro commented 1 year ago

Please read what I posted, I'm using Vanilla JS version of MDB inside Vue. There's some issue causing a problem I'm describing in this thread.

Plain javascript, as Vanilla JS is supposed to be, should work inside Vue but something is preventing it from working correctly. Using the Alert example I can create the Alert object but calling any Alert methods on that object results in "is not a function"

Eg:

testClick() {

const a = new mdb.Alert(document.getElementById('examplealert'));

a.show();

// Uncaught TypeError: a.show is not a function

}


Marcin Luczak staff commented 1 year ago

Hi,

You are right that plain JS should work properly inside the Vue application, but this will be 100% true only for your own code, written specifically for your own application. We, then, cannot guarantee that all components from the MDB Standard version, especially more advanced and complex ones will work with Vue directly, as they weren't written with Vue in mind and they might not be compatible with Vue syntax and its reactivity system. That's why the Vue version of MDB5 components is made, and we recommend using it for Vue applications.

I've checked your code for Alerts on the clean setup of the MDB5 Standard with Vue imported and it is working properly. So the question is how are you using Vue inside your project? Is it imported via CDN, installed with npm, or are you using Vue CLI / any other tooling for Vue? Would you be able to show your setup for the Vue inside your project, with all the imports and handling Vue app creation? Also, you've pasted HTML code with square brackets, are you using any kind of template engine for your HTML?

Keep coding, Marcin


BigMonkey pro answered 1 year ago


Tested exactly the same code in stand alone plain html/js page and it works. So there's something about Vue that prevents the plainJS MDB components from working.

Is someone monitoring Facebook messages on your page? I need to switch from Vanilla JS to Vue3 version.


parson premium commented 1 year ago

I had issues using getInstance with dynamically created alerts. I got the element by id and could then use it as expected. I don't use vue but I guess it's creating the elements after mdb would expect it to be available. e.g. const alertPopup = new mdb.Alert(document.getElementById('alert-danger'))


BigMonkey pro commented 1 year ago

There's some issue with Vanilla JS version and Vue3.

This code in my vue app didn't work either, it works if its not inside a vue app.

* HTML * [div class="alert alert-primary fade" id="examplealert" role="alert"]Example[/div] [button type="button" class="btn btn-primary" @click="testClick"]Test[/button]

* JS * methods: { testClick() { const elm = document.getElementById('examplealert'); console.log(elm); // OUTPUT: const a = new mdb.Alert(elm); console.log(a); // OUTPUT: Object { _element: div#examplealert.alert.alert-primary.fade } a.show(); // ERROR: Uncaught TypeError: a.show is not a function } }



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

  • User: Pro
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: Desktop
  • Browser: Firefox
  • OS: Win10
  • Provided sample code: No
  • Provided link: No
Tags