Vuejs - require is not defined

Are you using browserify for compiling code? This may help: https://laracasts.com/series/learning-vuejs/episodes/9

Yeah i now compiling with browserify now the required error is gone. But the template is not loading and i get the error Failed to resolve component: bar my console grrrr

This is my test js file app.js

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

var Foo = Vue.extend({
    template: '<p>This is foo!</p>'
})

// The router needs a root component to render.
// For demo purposes, we will just use an empty one
// because we are using the HTML as the app template.
var App = Vue.extend({})

// Create a router instance.
// You can pass in additional options here, but let's
// keep it simple for now.
var router = new VueRouter()

// Define some routes.
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// Vue.extend(), or just a component options object.
// We'll talk about nested routes later.
router.map({
    '/foo': {
        component: Foo
    },
   '/bar': {
        component: {
            'bar': require('./views/index')
        }
    }
})

// Now we can start the app!
// The router will create an instance of App and mount to
// the element matching the selector #app.
router.start(App, '#app')

Foo is showing, but not bar

views/index.js

module.exports = {
    template: require('./template.html')
};

views/template.html

<h1>Test Template</h1>

grrr ok now its working with

'/bar': {
        component: require('./views/index')
    }