Hi,
I was trying to use Alpine JS into my Laravel project. I declared them in resources/js/app.js
and in my webpack.mix.js file, i declard them as shown in image.
Now it gives error as KTUtil is not defined after running `npm run dev` command.
Link to Images:
https://imgur.com/a/4kEzjXf
Hi,
Inertia is not a default dependency, therefore you will need to install it.
Thanks
Hello I'm setting up a project with laravel and vue.js using inertia.js
while creating layout I'm facing some problem that
KTUtil is not defined,
Cannot set properties of undefined (setting 'Popper')
Cannot set properties of undefined (setting 'moment')
Please Help
Hi,
Does it work with Inertia JS?
It seems not working..
You're welcome! Glad to be of help. Don't hesitate to reach out if you have any further questions. Have a great day too!
Thanks a bundle. Really appreciate your efforts in helping me out.
Have a great day.
Hi
I'm glad to hear that it worked for you! Is there anything else I can assist you with?
Please be advised that our current implementation of Metronic for Laravel utilizes webpack as its build tool, and Vite integration is not yet available. It is important to note that Metronic makes use of several third-party plugins, which may not function optimally when built using Vite. Please note that we have plans to update our plugin compiler tool to Vite in a future update, but as of the moment, webpack is still the recommended build tool for our Laravel implementation.
Thanks
Yup. That worked
One thing more please, if i want to use vite instead webpack, can we do that?
Could you please try with the file node_modules/alpinejs/dist/cdn.js
?
Thanks
No luck.
https://imgur.com/a/eoXgRD0
You can try changing the path to node_modules/alpinejs/builds/cdn.js
instead.
Thanks
Hi,
Thanks for the response. I have included as you have asked but Alpine JS path is wrong
`node_modules/alpinejs/dist/alpine.js`
this file is included in `node_modules/alpinejs/src/alpine.js`
and when I use it, it gives error.
https://imgur.com/a/w38E8hi
Hi,
To import Alpine.js in your webpack mix file, you can use the following code:
mix.scripts([
"node_modules/alpinejs/dist/alpine.js",
"resources/js/app.js"
], "public/js/app.js");
mix.scripts
to combine multiple JavaScript files into a single file. The first parameter is an array of file paths, where we have included the path to Alpine.js in the node_modules directory and our own app.js
file in the resources/js directory. The second parameter is the output file path.<script src="{{ mix("js/app.js") }}"></script>
Yup. That worked but after removing these three lines.
`import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
`
as with these, it gives error.
Hi,
In your webpack.mix.js file, you can try replacing mix.js() with mix.scripts() and see if it resolves the issue.
Thanks
Hello,
I have imported plugins.bundle.js but now it gives errors about @popperjs/core and moment.
Here is the link.
https://imgur.com/a/6s49x45
Hi,
Apology for the delay in response.
Regarding your issue, KTUtil is defined in the plugins.bundle.js file. Have you imported this file into your project?
From the first image you provided, it seems like only scripts.bundle.js and style.bundle.css files are being built. Make sure you import the plugins.bundle.js file in your project to access KTUtil. Let me know if you need any further assistance.
Thanks