Laravel 5.3 vue 2 component not rendering

Question

I use Laravel 5.3 with Vue 2 and Vue Router but my component is not visible. Foo and Bar are working.

Here is my App.js

/**
* Load JavaScript dependencies
 */

require('./bootstrap');

/**
 * Import Vue and VueRouter
 */

import Vue from 'vue'
import VueRouter from 'vue-router'

/**
 * Import Components
 */
import UsersIndex from './components/users/Index.vue'
import Example from './components/Example.vue'

/**
 * Use VueRouter
 */
Vue.use(VueRouter)

/**
 * Define components
 */
const Foo = { template: '<div>Foo</div>' }
const Bar = { template: '<div>Bar</div>' }

/**
 * Create Router 
 */
const router = new VueRouter({

  mode: 'history',

  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar },
    { 
      path: '/users', 
        components: {
          component: UsersIndex
        }
    }
  ]
})

/** 
 * Create Vue instance and inject router
*/
new Vue({

    router

}).$mount('#app')

I don't get any error in the vuejs dev tools. But my UsersIndex Component is not visible.

Any idea?

Update

If I try

{ 
  path: '/users', 
  component: UsersIndex 
}

I get the following Vue warning

[Vue warn]: Failed to mount component: template or render function not defined.

craig_h craig_h · Accepted Answer · 2016-11-07T18:54:41

The usual way to do this is to have one component template for each route that represents the entire page, you seem to be nesting a component in a components object, however unless you are using named views, it should be:

{ 
  path: '/users', 
  component: UsersIndex 
}

Now UserIndex should display, here's the fiddle:

https://jsfiddle.net/1sjvto79/

Here's an example with a named view, if that's what you were aiming for, it simply targets a router view with the same name as the component attribute:

components: {
   users: UsersIndex
}

then in your markup:

<router-view  name="users"></router-view>

Here's the fiddle:

https://jsfiddle.net/1sjvto79/1/

Laravel 5.3 vue 2 component not rendering

1 Answers