title: Vue2 / vue-router / Laravel - router-view not showing a Vue Component
body: <p>I'm running into a problem where my Vue component isn't showing via router-view, there are no Vue warnings or errors in the console.</p>
  <p>Here's the git: <a href="https://github.com/woottonn/fullstack" rel="nofollow noreferrer">https://github.com/woottonn/fullstack</a></p>
  <p>Here's my code:</p>
  <p><strong>web.php</strong></p>
  <pre><code>&lt;?php
  
  Route::any('{any}', function(){
      return view('welcome');
  })-&gt;where('any', '.*');
  </code></pre>
  <p><strong>welcome.blade.php</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;{{ str_replace('_', '-', app()-&gt;getLocale()) }}&quot;&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;utf-8&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
          &lt;title&gt;Full Stack Blog&lt;/title&gt;
      &lt;/head&gt;
      &lt;body class=&quot;antialiased&quot;&gt;
          &lt;div id=&quot;app&quot;&gt;
              &lt;mainapp&gt;&lt;/mainapp&gt;
          &lt;/div&gt;
      &lt;script src=&quot;{{mix('/js/app.js')}}&quot;&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>app.js</strong></p>
  <pre><code>require('./bootstrap');
  import Vue from 'vue'
  import router from './router'
  
  Vue.component('mainapp', require('./components/mainapp.vue').default)
  const app = new Vue({
      el: '#app',
      router
  });
  </code></pre>
  <p><strong>router.js</strong></p>
  <pre><code>import Vue from 'vue'
  import Router from 'vue-router'
  
  Vue.use(Router)
  
  import myFirstVuePage from './components/pages/myFirstVuePage'
  
  const routes = [
      {
          path: '/my-new-vue-route',
          component: myFirstVuePage
      }
  ];
  
  export default new Router({
      mode: 'history',
      routes
  })
  </code></pre>
  <p><strong>mainapp.vue</strong></p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;h1&gt;VUE Componenty&lt;/h1&gt;
          &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p><strong>myFirstVuePage.vue</strong></p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;h1&gt;This is my first page...&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/AuYMV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AuYMV.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/dBTaS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dBTaS.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/yE94S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yE94S.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/3HoBY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3HoBY.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/1M3iW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1M3iW.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/8A01Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8A01Y.png" alt="enter image description here" /></a></p>
  <p>Am I missing obvious something here?</p>
  <p>--- EDIT: Going directly to the URL (/my-new-vue-route) throws an error, so that's not working either. ---</p>