Expressing Vue dependencies w/Browserify & CommonJS

Question

I am experimenting with Vue and would like to develop a node app with my usual setup which uses budo(browserify + watchify). ./index.html:

    <div id="app">
      {{ message }}
    </div>
<!-- ===================== JavaScript Files Below This Line =============== -->
    <script src="index.js"></script>

and ./src/js/main.js

const Vue = require('vue');

const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  });

  module.exports = app;

with ./index.js

// js includes
require('./src/js/main');

I cant see the message on the page. I see index.js in the console with main.js injected into it. When I use the Vue CDN with the vue code in index.html that works ok. I was hoping someone could shed some light on how one uses CommonJS modules to import vue code into their app when bundling w/browserify. Thanks in advance...

Answer 1

As explained here Vue.js not rendering you need to add this to your package.json file:

 "browser": {
    "vue": "vue/dist/vue.common.js"
  }