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>
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();
});
});
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;
export default KTComponents;
import KTComponents from "./js/components/_init.js"