Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Laravel HTML Theme integration in fresh Laravel 11.


Hello.
There is any guide that explain how to integrate Metronic HTML theme in a fresh Laravel instalation?

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

Replies (4)


Hi John,

There isn't a specific guide, but you can integrate the Metronic HTML theme into a fresh Laravel 11 project by exporting the HTML layout partials (e.g., header, footer, content area, side menu) using the Metronic Layout Builder.

http://preview.keenthemes.com/metronic8/demo1/layout-builder.html

Use the Layout Builder to customize and export your layout. Download the resulting HTML files.

Rename the exported HTML files to .blade.php format (e.g., header.blade.php, footer.blade.php).

Create a main layout file (master.blade.php) and include your partials using @include.

Copy the assets folder from Metronic into Laravel’s public directory.

Define your routes in routes/web.php.

Let me know if you need further clarification or run into issues!



And for Bootstrap version we have a guide to integrate Metronic HTML into fresh Laravel Install?



using laravel with liveware the components are not reinitialized.

document.addEventListener('livewire:navigated', () => {
KTDom.ready(() => {
KTComponents.init();
console.log('Livewire:navigated');

});
}, { once: true });



Hi John,

You can check the Metronic v9 Laravel integration guide here:

https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/laravel


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