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>--}}
@endsection
This 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
