Laravel & vue.js - not rendering an imported component

Question

I start playing with vue.js on top of the laravel framework.

But I am having problems rendering the imported component.

Mine app.js(primary entry point)

// app.js
var Vue = require('vue');
var Router = require('vue-router');

Vue.use(Router);

var router = new Router();

var ContractsOverview = Vue.extend({
    template: '<p>contract page</p>'
});

var ContractDetail = Vue.extend({
    template: '<p>detail page</p>'
});

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');

Run codeHide result

This is my Dashboard component (located in resources/assets/js/app/components/DashboardView.vue)

<template>
    <section class="content-header">
    <h1>
    Dashboard
    <small>Control panel</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Dashboard</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
    <!-- .. some html -->
</section>
</template>

<script>
export default {}
</script>

Run codeHide result

and in my layout I have a regular clip template with a tag <router-view></router-view>at one point.

At the end, I create my app.js with larvels elixir and the following gulpfile:

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');
});

Run codeHide result

When I go to the routes page /contractsand contracts/:id, the templates are displayed as expected. But when I go along the route /dashboard, I see nothing (except the layout).

Am I missing something? I forgot to import or require something?

Answer 1

, , , 4 , -.

gulp (homestead), , gulp . , .

gulp watch -.