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.

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

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