Vue JS with vue-router not loading vueified components

Question

I am developing a web application which makes use of vue-router for an SPA with a Laravel 5 backend. It makes use of .vue files for app components which are run through laravel-elixir-vueify in order to create the required JavaScript.

I have set up vue-router along with Vue successfully and can load components defined in the same file as the main Vue and Vue router instances.

The problem comes however when I try and require a component which is contained within a .vue file. Despite browserify / vueify reporting a successful run when I inspect the Vue instance there are only anonymous component fragments shown within the instance by Vue dev-tools, and no markup placed within the router-view.

There are no errors within the console, although it looks as though the external components are not being loaded correctly.

Examples of the various code and files are as follows:

gulpfile.js

...
    mix.browserify('dashboard.js');
...

dashboardOverview.vue

<template>
    <div>
        <h1>Overview</h1>
        <img src="//placehold.it/320x100" style="width: 100%; margin-bottom: 15px" alt="Pathway Visualisation" />
    </div>
</template>

<script>

    export default {}

</script>

Where dashboardOverview.vue is located at resources\assets\js\components\dashboardOverview.vue.

Main View

@section('content')
<div id="app">
    <h1>Welcome</h1>
    <a v-link="{ path: '/activate' }">Activate</a>|
    <a v-link="{ path: '/' }">Overview</a>
    <router-view></router-view>
</div>
@endsection

This is supplemented by the following JavaScript:

var Vue = require('vue');
var VueRouter = require('vue-router');

Vue.use(VueRouter)

/* Components */
var dashboardOverview = require('./components/dashboardOverview.vue');
var userSetup = require('./components/userSetup.vue');

var App = Vue.extend();

var router = new VueRouter()
Vue.config.debug = true

router.map({
    '*': {
        component: Vue.extend({template: '<h4>404 Not found</h4>'})
    },
    '/': {
        component: dashboardOverview
    },
    '/activate': {
        component: userSetup
    }
})

router.start(App, '#app')

Where dashboard.js is located at resources\assets\js\dashboard.js.

Thinking about answers, but for starters fragment instances cause a bunch of weird issues. You should wrap the component in a div always — Jeff
Hi @Jeff, thanks for the suggestion. I have wrapped the component in a div although the problem still persists. — Daniel Waghorn

Daniel Waghorn Daniel Waghorn · Accepted Answer · 2016-03-13T21:05:02

I set up a minimal test project and managed to successfully achieve what I was aiming for.

The end result of this was some Node packages which had incompatible versions, and also packages that weren't required.

I pruned my packages.json file and then reinstalled the required vue, vue-router, and laravel-elixir-vueify packages to ensure everything was installed correctly with the correct dependencies and it has worked since.

Vue JS with vue-router not loading vueified components

1 Answers