Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
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
Sadly it doen't work, please help me out how do i use vue app id on the root level.
Thank you.
Replies (2)
Error : https://ibb.co/F0234Kd
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
