Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

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


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



Hi Faizal,
it's 5 months later and I'm still waiting for a official Vite integration :D
Do you have any news regarding that topic?

It's a ton of work to update Metronic if I use my customized Vite integration.

Best regards,
Sebastian



Hi Sebastian,

I apologize for the delay and any inconvenience this has caused you.

Vite integration for Metronic may be challenging because Metronic is a complex web application with a large codebase and many components. Vite is a relatively new build tool and may not have the same level of community support and documentation as more established tools like Webpack. Additionally, integrating Vite with a large and complex project like Metronic may require significant changes to the existing codebase and may involve compatibility issues with other dependencies. Overall, the process of integrating Vite with Metronic is likely to require a significant investment of time and resources to ensure that it is done correctly and with minimal disruption to existing functionality.

In the meantime, please let us know if you have any further questions or concerns.

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