Metronic Mega Update!Tailwind 4, React 19, Next.js 15, KtUI, ReUI, eCommerce, User Management Apps and more
Explore Update 
Metronic 8 + demo 1 + Laravel 9 + simple vue (Hello world) integration ROOT LEVEL
Hello author, i am trying to impletemet vue in metronic 8 : demo1
So far i have managed to implement vue as instructed here : https://preview.keenthemes.com/metronic8/vue/docs/?_ga=2.126652361.574265224.1648481172-1797318304.1625209156#/vue-laravel-integration
As for now i can only use view component on pages only, this is how i implmented
"users" => [
"title" => "User List",
"list" => [
"title" => "Users List",
"assets" => [
"custom" => [
"css" => [
"plugins/custom/datatables/datatables.bundle.css",
],
"js" => [
"plugins/custom/datatables/datatables.bundle.js",
"js/vueApp.js", // HERE IS MY COMPILED VUE JS FILE
],
],
],
],
],On blade, like this
<x-base-layout>
<div class="card" id="vueApp">
<div class="card-body pt-6">
<user-datatables></user-datatables>
</div>
</div>
</x-base-layout>It's working fine but what about other components on the html ?
So far i have tried wrapping with vue id and div
@extends("base.base")
@section("content")
{{--<div id="vueApp">--}} // HERE I HAVE TRIED
<!--begin::Main-->
@if (theme()->getOption("layout", "main/type") === "blank")
<div class="d-flex flex-column flex-root">
{{ $slot }}
</div>
@else
<!--begin::Root-->
<div class="d-flex flex-column flex-root">
<!--begin::Page-->
<div class="page d-flex flex-row flex-column-fluid">
@if( theme()->getOption("layout", "aside/display") === true )
{{ theme()->getView("layout/aside/_base") }}
@endif
<!--begin::Wrapper-->
<div class="wrapper d-flex flex-column flex-row-fluid" id="kt_wrapper">
{{ theme()->getView("layout/header/_base") }}
<!--begin::Content-->
<div class="content d-flex flex-column flex-column-fluid {{ theme()->printHtmlClasses("content", false) }}" id="kt_content">
@if (theme()->getOption("layout", "toolbar/display") === true)
{{ theme()->getView("layout/toolbars/_" . theme()->getOption("layout", "toolbar/layout")) }}
@endif
<!--begin::Post-->
<div class="post d-flex flex-column-fluid" id="kt_post">
{{ theme()->getView("layout/_content", compact("slot")) }}
</div>
<!--end::Post-->
</div>
<!--end::Content-->
{{ theme()->getView("layout/_footer") }}
</div>
<!--end::Wrapper-->
</div>
<!--end::Page-->
</div>
<!--end::Root-->
{{ theme()->getView("pages/apps/chat/_partials/_drawer-messenger") }}
<!--end::Drawers-->
<!--begin::Engage-->
{{ theme()->getView("partials/engage/_main") }}
<!--end::Engage-->
@if(theme()->getOption("layout", "scrolltop/display") === true)
{{ theme()->getView("layout/_scrolltop") }}
@endif
@endif
<!--end::Main-->
{{--</div>--}}
@endsectionThis is the error that i'm facing
<img src="https://ibb.co/F0234Kd" />
Sadly it doen't work, please help me out how do i use vue app id on the root level.
Thank you.
Replies (2)
Hi Vipul,
Sorry for the late reply.
Could you please check your blade template if there is any misplaced comma "," or unclosed/extra HTML tag ">"?
Please check the similar issue here. You could find answer from others.
https://stackoverflow.com/a/64911673
Thanks
Error : https://ibb.co/F0234Kd
