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

Metronic Tailwind Inertia


Hello
How can I use Metronic Tailwind, on Laravel Inertia Js


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)


On my first day at https://baterybet-in.in/, I took advantage of the daily promotions for new users. I played roulette and my number came up a winner twice in a row. It was amazing and really exciting. I feel safe playing here as the customer service is excellent, I'm always looking forward to my next win!



Hi,

Thank you for reaching out to us.

At the moment, we haven't tried using Metronic in combination with Inertia, we will check it and consider using Inertia in a future release if we see demand.

You can start the Vue app using our metronic-tailwind-vue example app.

Then, use this tutorial for Inertia integration.
https://harrk.dev/getting-started-with-inertia-js-and-laravel/

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hello

Use metronic-tailwind-vue is not solution and will not work.
No one ca give suggestion how I can make interaction.

For ex. I do this it will be correct:
1. metronic-tailwind-html\dist\assets copy all files laravel-project\public folder
2. This is how look inertia app blade

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Scripts -->
@routes
@vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
@inertiaHead
</head>
<body class="font-sans antialiased">
@inertia
</body>
</html>


I can add bottom

<!-- Scripts -->
<script src="assets/js/core.bundle.js">
</script>
<script src="assets/vendors/apexcharts/apexcharts.min.js">
</script>
<script src="assets/js/widgets/general.js">
</script>
<script src="assets/js/layouts/demo1.js">
</script>
<!-- End of Scripts --


and i head

<link href="assets/vendors/apexcharts/apexcharts.css" rel="stylesheet"/>
<link href="assets/vendors/keenicons/styles.bundle.css" rel="stylesheet"/>
<link href="assets/css/styles.css" rel="stylesheet"/>


But in Layouts AuthenticatedLayout
I need init metronic ? for ex this is correct?

onMounted(() => {
KTComponents.init();
KTThemeMode.init();
});



Hi,

Your solution looks fine, do you have any errors or problems using it?

Regards,
Lauris Stepanovs,
Keenthemes Support Team


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