Vue.js view model and splitting in different files
<p>Although everything works fine in a single file. I am having trouble to split the code in multiple files and then bundling in a .vue file. Here i am giving the final .vue file for simplicity.</p>

<p>Here is my html file:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Using databinding with components&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;This is databinding&lt;/h1&gt;
&lt;databinding&gt;&lt;/databinding&gt;

&lt;script src="build/bundle.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>My js file</p>

<pre><code>//databindingcomponent.js
var Vue = require('vue')
var Databinding = require('./components/databinding/databinding.vue')

new Vue({
    el: 'body',
    components: {
        databinding: Databinding
    }
})
</code></pre>

<p>my vue file (./components/databinding/databinding.vue)</p>

<pre><code>&lt;template&gt;
&lt;div id="example1"&gt;
    Hello {{ name }}, the date is {{ date }}!
&lt;/div&gt;&lt;/template&gt;

&lt;script&gt;
var Vue = require('vue')

var exampleData = {
    name: 'Vue.js',
    date: '2016-07-13'
}

// create a Vue instance, or, a "ViewModel"
// which links the View and the Model
var exampleVM = new Vue({
    el: '#example1',
    data: exampleData
})&lt;/script&gt;
</code></pre>

<p>And then i run </p>

<pre><code>.\node_modules\.bin\browserify -t vueify -e .\databindingcomponent.js -o .\build\bundle.js
</code></pre>

<p>The error I am getting is the following:</p>

<pre><code>databindingcomponent.js:2 Uncaught ReferenceError: require is not defined(anonymous function) @ databindingcomponent.js:2
</code></pre>

<p>Here is the code in a single file (it works but I want to split it into .html and .js and use final .vue file):</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div id="example1"&gt;
    Hello {{ name }}, the date is {{ date }}!
&lt;/div&gt;

&lt;script&gt;
    var exampleData = {
        name: 'Vue.js',
        date: '2016-07-13'
    }

    // create a Vue instance, or, a "ViewModel"
    // which links the View and the Model
    var exampleVM = new Vue({
        el: '#example1',
        data: exampleData
    })
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Thanks</p>