title: Vue.js not working on fresh Laravel 5.8 project
body: <p>I've created a new Laravel project with <code>laravel new test</code>. Then I've ran <code>npm install</code> and <code>npm run dev</code>. I changed the <code>welcome.blade.php</code> file to</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script type="text/javascript" href="{{ mix('js/app.js') }}"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="app"&gt;
              &lt;example-component&gt;&lt;/example-component&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and that's the only change I've made. However the page is blank, and the Vue devtools extensions on Chrome says "Vue.js not detected".</p>
  
  <p>Since Laravel provides nearly out-of-the-box support for Vue, I can't see what's going wrong. The relevant files are below (untouched from Laravel's installation).</p>
  
  <p><code>/resources/js/app.js</code> (which compiles successfully with <code>npm run dev</code> to <code>/public/js/app.js</code>)</p>
  
  <pre><code>/**
   * First we will load all of this project's JavaScript dependencies which
   * includes Vue and other libraries. It is a great starting point when
   * building robust, powerful web applications using Vue and Laravel.
   */
  
  require('./bootstrap');
  
  window.Vue = require('vue');
  
  /**
   * The following block of code may be used to automatically register your
   * Vue components. It will recursively scan this directory for the Vue
   * components and automatically register them with their "basename".
   *
   * Eg. ./components/ExampleComponent.vue -&gt; &lt;example-component&gt;&lt;/example-component&gt;
   */
  
  // const files = require.context('./', true, /\.vue$/i);
  // files.keys().map(key =&gt; Vue.component(key.split('/').pop().split('.')[0], files(key).default));
  
  Vue.component('example-component', require('./components/ExampleComponent.vue'));
  
  /**
   * Next, we will create a fresh Vue application instance and attach it to
   * the page. Then, you may begin adding components to this application
   * or customize the JavaScript scaffolding to fit your unique needs.
   */
  
  const app = new Vue({
      el: '#app',
  });
  </code></pre>
  
  <p><code>/resources/js/components/ExampleComponent.vue</code>:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="container"&gt;
          &lt;div class="row justify-content-center"&gt;
              &lt;div class="col-md-8"&gt;
                  &lt;div class="card"&gt;
                      &lt;div class="card-header"&gt;Example Component&lt;/div&gt;
  
                      &lt;div class="card-body"&gt;
                          I'm an example component.
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          mounted() {
              console.log('Component mounted.')
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><code>webpack.mix.js</code>:</p>
  
  <pre><code>const mix = require('laravel-mix');
  
  /*
   |--------------------------------------------------------------------------
   | Mix Asset Management
   |--------------------------------------------------------------------------
   |
   | Mix provides a clean, fluent API for defining some Webpack build steps
   | for your Laravel application. By default, we are compiling the Sass
   | file for the application as well as bundling up all the JS files.
   |
   */
  
  mix.js('resources/js/app.js', 'public/js')
      .sass('resources/sass/app.scss', 'public/css');
  </code></pre>
  
  <p><code>package.json</code>:</p>
  
  <pre><code>{
      "private": true,
      "scripts": {
          "dev": "npm run development",
          "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
          "watch": "npm run development -- --watch",
          "watch-poll": "npm run watch -- --watch-poll",
          "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
          "prod": "npm run production",
          "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
      },
      "devDependencies": {
          "axios": "^0.19",
          "bootstrap": "^4.1.0",
          "cross-env": "^5.1",
          "jquery": "^3.2",
          "laravel-mix": "^4.0.7",
          "lodash": "^4.17.5",
          "popper.js": "^1.12",
          "resolve-url-loader": "^2.3.1",
          "sass": "^1.15.2",
          "sass-loader": "^7.1.0",
          "vue": "^2.5.17",
          "vue-template-compiler": "^2.6.10"
      }
  }
  </code></pre>
  
  <p>Again, these are all simply as they get installed.</p>
  
  <p>Any ideas? The blank page is successfully loading the compiled <code>app.js</code> file, which looks as it should (e.g. there's mentions of Vue and <code>example-component</code>).</p>