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

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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 KTBlockUI

Then import it into your component.

import KTBlockUI from "@/path/to/blockui.js"

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(