Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

VueJS build with Demo23 Html Assets


Hello,
I have a project with Laravel Api Backend and Vuejs frontend.
for the assets, I have used demo 23 demos23/src for my frontend.
While trying to build my project in vuejs npm run build
i have issues with KTUtil is undefined

<!DOCTYPE html>
<html lang="en" class="h-full bg-gray-100">
<head>
<meta charset="UTF-8" />
<!-- <link rel="icon" href="/favicon.ico" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./src/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
<link href="./src/assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

<title>Finance App</title>
</head>
<body class="">

<script type="module" src="./src/main.js"></script>

<script src="./src/assets/plugins/global/plugins.bundle.js"></script>
<script src="./src/assets/js/scripts.bundle.js"></script>


<div id="app">
</div>
</body>
</html>


this is my index.html
where should i call the assets in my VueJS project?
in my main.js, index.html or anywhere else


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 (4)


view-contact.js:1 Uncaught ReferenceError: KTUtil is not defined
at view-contact.js:1:873



Hi,

In our HTML version we initialize our components inside load event, in SPA versions content is rendered differently and to use our js components you need to move initialization from load event to onMounted function.


onMounted(() => {
nextTick(() => {
KTComponents.init();
});
});


You can refer to the initialization example in file src/layouts/main-layout/MainLayout.vue in Metronic Vue demos.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi,
thank you for the answer,
Keeping in mind I have the assets of html, I dont have the same components as the vuejsDemo.

What can be another option,to call this componets,
for the moment i have called the the preview links of metronic in my index.html



Hi,

You still can do the same by using our js components from the HTML version, the only difference is you need somehow access js component instances in your vue component.

If you want to use bundled versions then you can achieve this by adding components into a window scope.

You can add a component to the global scope by using the following code.

window.KTComponents = KTComponents;


This needs to be done if you are using webpack if you are building assets with gulp global instances will be created by default and you can easily access them in your components as I showed in my previous comment.

Alternatively, instead of using bundled versions of our js files, you can use original files and import components instances directly from js file.

Add export function in a js file.

export default KTComponents;


Then in your components you can import this instance.

import KTComponents from "./js/components/_init.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  :(