Integrate Metronic with Laravel 9 Vite

Hi,
I've set up a new Laravel project which uses Vite as standard.
I tried to integrate Metronic but there are many errors.
The biggest problem is that the require does not work anymore. I tried to replace with import but that won't work because the order is not correct (KTUtil etc. are missing in other imports).

Is there a guide for that?
I've used the html template and I am only using a monolith Laravel application (without vue or other frontend frameworks).

Best regards
Sebastian

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)

Hi Sebastian,

We have a plan to create a new Laravel version with Vite in the future. Currently, we do not have a guide to integrating with Vite yet. The best way, for now, is to integrate the final bundle css/js from the HTML version.

plugins.bundle.js
plugins.bundle.css
scripts.bundle.js
style.bundle.css

Thanks

Hi, have a possible release date for the new version of Laravel + Vue with Vite and Inertia?

HI Faizal,
thank you for the reply.
If it still won't work after my tests I'm going to use your solution.

Best regards
Sebastian

Hi,

We have no exact date to release the Laravel+Vite yet. But it is a high priority now. We expect to include it in the next release soon.

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