[Vue warn]: Cannot find element: #app

Level 1

At what part of your document are you loading the app.js file?

1 like

zoomyboy

Level 20

As far as I can see, you generate a "section class="widget" for every $pageWidget on your page. If that's the case, and you have more than one widget, you would also have more than one section with the ID "app", which is not allowed. So probably Vue would complain cause it doesnt know which '#app' to use.

Level 13

@StephenLake this is the blade template im using

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <title>{{ config('app.name') }}</title>
    <meta charset="UTF-8">
    <meta name="robots" content="nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="robots" content="noindex,nofollow"/> 
    <link rel="shortcut icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    <meta name="csrf-token" content="{{ csrf_token() }}">


    <link href="{{ mix('/css/designer.css') }}" rel="stylesheet">
    <link href="{{ asset('/css/fontawesome5/css/all.min.css') }}" rel="stylesheet">

<body class="bg-blue-lightest font-light leading-normal" id="designer">

    @yield('content')

    <script type="text/javascript" src="{{ mix('/js/app.js') }}"></script>

</body>

</html>

and the app.js file is the same file provided with laravel and its remains untouched since started the project

require('./bootstrap');

window.Vue = require('vue');

const app = new Vue({

    el: '#widget'

});

1 like

Level 47

1.change de section id to another name;

2, wrap your content in a div which id=app.

1 like

Level 13

@MaverickChan im not sure if i understood you correctly but still im getting the same error

<section id="widget" class="widget-jumborton lg:h-screen md:h-screen flex flex-col justify-around">

  {{-- @include('admin.designer.ui.widget-settings') --}}

  <div class="container mx-auto px-5">

    <div class="flex-col">
      <div class="flex-col p-5">
        
        <div class="flex-1">
            <div class="box text-center text-white">
              <h1 class="text-6xl font-bold text-shadow">Welcome to my website</h1>
            </div>
        </div>
     </div>
    </div>  
  </div>
</section>

above is the entire widget as i have it on the page

Best Answer

Level 47


<div id="app">

    @yield('content')

</div>

1 like

Level 13

@MaverickChan yah it worked but im getting new error

[Vue warn]: Error compiling template:

after doing

<div id="app">

    @yield('content')

</div>

1 like

Level 47

i didn't see any of your component part

1 like

Level 13

@MarerickChan exactly i don't have a component on the code but yet im still getting error compiling template,Thats wired

Level 47

@nhayder show me the whole vue error message from console

1 like

Level 13

@MaverickChan Ok i got it working this time, if anybody out there is have same issue like above, make sure you don't have tags on blade template on the same page the vue is working on?

I have removed all customer tags from blade to separate css sheet and my code started to run correctly

All the best

1 like