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
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
