title: [Vue warn]: Cannot find element: #app
body: <p>I have a fresh installed laravel project with all the components updated.</p>
  
  <p>All I did is tried to add <code>app.js</code> in my welcome.blade.php file, after adding the following I get this error</p>
  
  <blockquote>
    <p>[Vue warn]: Cannot find element: #app </p>
  </blockquote>
  
  <p>I followed this thread, but it's not relevant as my script is at the bottom of the page.
  <a href="https://laracasts.com/discuss/channels/vue/fresh-laravel-setup-and-vue-2-wont-work" rel="noreferrer">https://laracasts.com/discuss/channels/vue/fresh-laravel-setup-and-vue-2-wont-work</a></p>
  
  <p>Here's my file</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;title&gt;{{$project}} | {{ $title }}&lt;/title&gt;
  
      &lt;!-- Fonts --&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css"&gt;
  
      &lt;!-- Styles --&gt;
      &lt;link href="/css/app.css" rel="stylesheet" type="text/css"/&gt;
  
      &lt;style&gt;
        ...
      &lt;/style&gt;
      &lt;/head&gt;
      &lt;body class="sticky-nav"&gt;
      &lt;div id="nav"&gt;
      &lt;div class="display-sm"&gt;
          &lt;header class="top-header"&gt;
              &lt;span class="menu-icon"&gt;☰&lt;/span&gt;
          &lt;/header&gt;
      &lt;/div&gt;
          &lt;div class="custom-container"&gt;
          &lt;div id="logo" class="float-left"&gt;
              &lt;img alt="xyz" src="/images/xyz.png"/&gt;&lt;span&gt; xyz&lt;/span&gt;
          &lt;/div&gt;
          &lt;div id="btn-project" class="float-right"&gt;
              &lt;a title="project" href="#" class="btn btn-project"&gt;Project&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="sub-container"&gt;
      &lt;h1 id="header-title"&gt;{{ $header_title }}&lt;/h1&gt;
      &lt;h2 id="meta-data"&gt;&lt;i class="fa fa"&gt;&lt;/i&gt;{{$location}} &lt;span id="category"&gt; &lt;i&gt;&lt;/i&gt;{{$category}} &lt;/span&gt;&lt;/h2&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
      &lt;script src="/js/app.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      var wrap = $(".sticky-nav");
  
      wrap.on("scroll", function (e) {
  
          if (this.scrollTop &gt; 147) {
              wrap.find('#nav').addClass("fix-nav");
          } else {
              wrap.find('#nav').removeClass("fix-nav");
          }
  
          });
      &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>