title: How to use multiple components on a Vue route
body: <p>I am just starting out with Vue and am trying to use two components in a route - a navbar and some sales data.  Laravel mix is bundling the assets with Webpack, and npm keeps failing.</p>
  
  <p>index.php</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="app"&gt;
          &lt;router-view name="nav"&gt;&lt;/router-view&gt;
          &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/div&gt;
      &lt;script src="{{ asset('js/app.js') }}"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>app.js:</p>
  
  <pre><code>import './bootstrap';
  import router from './routes';
  const app = new Vue({
      el: '#app',
      router
  });
  </code></pre>
  
  <p>routes.js:</p>
  
  <pre><code>import VueRouter    from 'vue-router';
  import Sales        from './views/employer/sales/Sales.vue';
  import MainNav      from './components/MainNav.vue';
  
  let routes = [
      {
          path: '/sales',
          components: {
              default: Sales,
              nav: MainNav
          }
      }
  ];
  
  export default new VueRouter({
      routes,
      linkActiveClass: 'is-active'
  });
  </code></pre>
  
  <p>Sales.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;p&gt;This is the Sales view&lt;/p&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>MainNav.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;p&gt;This is the MAIN NAVIGATION&lt;/p&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>The error message from npm is not particularly enlightening:</p>
  
  <pre><code>Failed at the @ dev script 'node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
  </code></pre>
  
  <p>It goes on to suggest that I should check I am running the latest node and npm (which I am).</p>
  
  <p>What am I doing wrong?  Curiously, before attempting to include the navigation component this way, I was registering it as a global component.  It seemed to register fine, but whenever I included its element tag in a template, npm would fail in the same manner as above.</p>