How to use BlockUI with Vue3 App?
Hello,
I'm using Metronic 8.1.5 with Vue3, and I'm trying to use the BlockUI (following the documentation https://preview.keenthemes.com/html/metronic/docs/general/blockui) but the KTBlockUI is not recognized.
How can I use that BlockUI component?
Thanks
Replies (3)
Hi Amit,
You need to import the KTBlockUI instance from the file src/js/components/blockui.js.
Then you can use this instance as shown in our documentation.
var button = document.querySelector("#kt_block_ui_1_button");
var target = document.querySelector("#kt_block_ui_1_target");var blockUI = new KTBlockUI(target);
button.addEventListener("click", function() {
if (blockUI.isBlocked()) {
blockUI.release();
button.innerText = "Block";
} else {
blockUI.block();
button.innerText = "Release";
}
});
Regards,
Lauris Stepanovs,
Keenthemes Support Team
This following line "new KTBlockUI(target);" returns "KTBlockUI is not recognized"
Is there anything I should do to include/import KTBlockUI?
Hi,
KTBlockUI class is located in the file src/js/components/blockui.js, you need to copy this file from our HTML version and paste it into your project, then import this class to your component.
Make sure to add export code to file blockui.js.
export default KTBlockUIThen import it into your component.
import KTBlockUI from "@/path/to/blockui.js"Regards,
Lauris Stepanovs,
Keenthemes Support Team
