Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Issues Integrating Metronic V9.2.0 with Laravel


Hello,

I recently purchased the Metronic V9.2.0 theme and am trying to integrate it with Laravel.

Despite several attempts, I am unable to properly install the theme. I have carefully followed all the steps but keep encountering an error during the build process.

Here’s what I have done so far:

  1. Installed a new Laravel site.
  2. Added keenthemes/ktui using npm install @keenthemes/ktui.
  3. Copied the src folder from the Metronic template to resources/metronic
  4. Copied the media folder to public/asset.
  5. Updated the KtUI paths in resources/metronic/css/styles.css.
  6. Modified the app.css and app.js files.




When I run npm run build, I get the following error:



[commonjs--resolver] Missing "./src/index" specifier in "@keenthemes/ktui" package


I suspected that the path in app.js might be incorrect, so I replaced:


import "@keenthemes/ktui/src/index";

with:


import "../../node_modules/@keenthemes/ktui/src/index";



However, this resulted in a new error:


[commonjs--resolver] Missing "./src/components/dropdown" specifier in "@keenthemes/ktui" package


To address this, I tried updating the file resources/metronic/core/components/menu/menu.ts by changing:


import { KTDropdown } from "@keenthemes/ktui/src/components/dropdown";

to:


import { KTDropdown } from "../../../../../node_modules/@keenthemes/ktui/src/components/dropdown";


This change allowed the build to pass, but the page still does not work as expected.

Am I missing something? Has anyone successfully integrated Metronic with Laravel? Any guidance would be greatly appreciated.

Thank you in advance for your help.

Best regardssad
user
Dany Derigon 1 year ago
Metronic Laravel
5 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)

user
Faizal Author 1 year ago

Hi Dany,

Thanks for the detailed explanation. it really helps.

We’ve recently pushed an update to the @keenthemes/ktui package that resolves the path-related import issues you mentioned (e.g. Missing "./src/index". To get the fixes:


npm upgrade @keenthemes/ktui


After that, clear Vite’s cache and rebuild:


rm -rf node_modules/.vite

npm run dev


user
Dany Derigon 1 year ago

Hello,

Great, the fix has resolved the compilation issue. Thank you for your quick response !!

However, not everything is working as expected yet:

1 - Page display:
My page doesn't look like it should. Here’s how it appears right now :
<img src="https://i.imgur.com/1j7QGdH.png" />
instead of
<img src="https://i.imgur.com/mddNpZ0.png" />
I am using the index.blade.php files provided on the GitHub repository of Metronic: https://github.com/keenthemes/metronic-tailwind-html-integration/blob/main/metronic-tailwind-laravel/resources/views/index.blade.php

2 - Console issues:
The console shows several errors
<img src="https://i.imgur.com/8YVepyl.png" />

Also, I noticed numerous console.log() messages in the console, apparently caused by a console.log("result:" + e) left in the code (I hope it’s just a forgotten debug line 😅).

Could you help me resolve these new issues? Thank you in advance for your assistance!

Best regards,<img src="" />


user
Dany Derigon 1 year ago

OK, foud the problem.

in the file : resources/metronic/css/styles.css

We need to change 

@source "../../../node_modules/@keenthemes/ktui/src/";


with 


@import "../../../node_modules/@keenthemes/ktui/styles.css";


user
Faizal Author 1 year ago

Hi Dany

Glad you fixed it.
We will improve the docs to simplify the integration.

Thanks


user
Dany Derigon 1 year ago

Also, why I don't have all the tailwind css classes like space-y-6 ? I only got space-y-10 for example :/


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(