title: Laravel & vue.js - not rendering imported component
body: <p>I'm starting to play around with vue.js on top of the laravel framework.</p>
  
  <p>But im having trouble with rendering of a component which is imported.</p>
  
  <p>My <code>app.js</code> (main entry point)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// app.js
  var Vue = require('vue');
  var Router = require('vue-router');
  
  Vue.use(Router);
  
  var router = new Router();
  
  var ContractsOverview = Vue.extend({
      template: '&lt;p&gt;contract page&lt;/p&gt;'
  });
  
  var ContractDetail = Vue.extend({
      template: '&lt;p&gt;detail page&lt;/p&gt;'
  });
  
  import DashboardView from './app/components/DashboardView.vue';
  
  router.map({
      '/dashboard': {
          component: DashboardView
      },
      '/contracts': {
          component: ContractsOverview
      },
      '/contracts/:id': {
          component: ContractDetail
      }
  });
  
  var App = Vue.extend({
  });
  
  router.redirect({
      '*': '/dashboard'
  });
  
  router.start(App, '#reminder-app');</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is my Dashboard component 
  (located at <code>resources/assets/js/app/components/DashboardView.vue</code>)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;section class="content-header"&gt;
      &lt;h1&gt;
      Dashboard
      &lt;small&gt;Control panel&lt;/small&gt;
      &lt;/h1&gt;
      &lt;ol class="breadcrumb"&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-dashboard"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
          &lt;li class="active"&gt;Dashboard&lt;/li&gt;
      &lt;/ol&gt;
  &lt;/section&gt;
  &lt;!-- Main content --&gt;
  &lt;section class="content"&gt;
      &lt;!-- .. some html --&gt;
  &lt;/section&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {}
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and in my master layout i have a normal blade template with the <code>&lt;router-view&gt;&lt;/router-view&gt;</code> tag at one point.</p>
  
  <p>At the end i build my app.js with laravels elixir and the following gulpfile:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var elixir = require('laravel-elixir');
  
  elixir.config.js.browserify.transformers.push({
      name: 'vueify',
      options: {}
  });
  
  elixir(function(mix) {
      mix.less(['bootstrap.less', 'app.less']);
  
      mix.scripts([
          'admin-lte/plugins/jQuery/jQuery-2.1.4.min.js',
          'admin-lte/plugins/jQueryUI/jquery-ui-1.10.3.min.js',
          // some more scripts,
          'admin-lte/app.js',
          'admin-lte/pages/dashboard.js',
          'admin-lte/demo.js'
  
      ], 'public/js/ui.js');
  
      mix.browserify('app.js');
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>When i go to the page the routes <code>/contracts</code> and <code>contracts/:id</code> the templates are shown as expected.
  But when i go the <code>/dashboard</code> route, i dont see anything (besides the layout).</p>
  
  <p>Am I missing something? Did I forget to import or require something?</p>