Light
Dark
System
Ask  Question

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.
user
Vipul Walia 1 year ago
Vue Metronic Laravel
2 Answers
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)

user
Vipul Walia 1 year ago

Error : https://ibb.co/F0234Kd


F
Faizal Author1 year ago

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

Metronic

Go to MetronicDownloadsPurchase MetronicRefunds

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle