All geek questions in one place

[Vue warn]: Unable to find item: #app

I have a new installed laravel project with all updated components.

All I have done is trying to add app.js to my welcome.blade.php file, adding the following, I get this error

[Vue warn]: Unable to find item: #app

I followed this stream, but this is not relevant, since my script is at the bottom of the page. https://laracasts.com/discuss/channels/vue/fresh-laravel-setup-and-vue-2-wont-work

Here is my file

  <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>{{$project}} | {{ $title }}</title> <!-- Fonts --> <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css"> <!-- Styles --> <link href="/css/app.css" rel="stylesheet" type="text/css"/> <style> ... </style> </head> <body class="sticky-nav"> <div id="nav"> <div class="display-sm"> <header class="top-header"> <span class="menu-icon">☰</span> </header> </div> <div class="custom-container"> <div id="logo" class="float-left"> <img alt="xyz" src="/images/xyz.png"/><span> xyz</span> </div> <div id="btn-project" class="float-right"> <a title="project" href="#" class="btn btn-project">Project</a> </div> </div> </div> <div class="sub-container"> <h1 id="header-title">{{ $header_title }}</h1> <h2 id="meta-data"><i class="fa fa"></i>{{$location}} <span id="category"> <i></i>{{$category}} </span></h2> <div class="clear"></div> </div> <script src="/js/app.js"></script> <script> var wrap = $(".sticky-nav"); wrap.on("scroll", function (e) { if (this.scrollTop > 147) { wrap.find('#nav').addClass("fix-nav"); } else { wrap.find('#nav').removeClass("fix-nav"); } }); </script> </body> </html>
+11
source share
3 answers

The error says it all. Vue cannot find the #app element, so you need to add it:

 <div id='app'></div>

https://vuejs.org/v2/guide/

+18
source

Make sure your main design file app.blade.php contains a div with the application identifier immediately after <body> for example:

 <body> <div id="app"> . . . </div> </body>
+2
source

Sometimes it seems that everything worked out, but we still get the same error, then you must copy this code and paste it into the application. blade.

 <head> <!-- Scripts --> <script src="{{ asset('js/app.js') }}" defer></script> <!-- Fonts --> <link rel="dns-prefetch" href="//fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> <!-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> </head> <body> <div id="app"> . . . . . . </div> </body>'
0
source

Source: https://habr.com/ru/post/1262131/

More articles:


All Articles