vue.jsbrowserifypackage.json

How can I confirm that I am using the "full build" of Vue?


I have added this line to my package.json as recommended by the Vue docs (I'm using Browserify):

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

But how can I tell this is actually having the intended effect?

Whether or not I have that line, this test does not produce an error:

new Vue({
  template: '<div>{{ hi }}</div>'
})

Solution

  • If the string template does not throw any error, then you have the "full" Vue version (i.e. it includes the compiler). You can double check by testing for the presence of Vue.compile.

    Example with UMD, full build:

    new Vue({
      el: '#app',
      template: '<div>{{ hi }}</div>',
      data: {
        hi: 'hello'
      }
    });
    
    console.log(Vue.compile);
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    
    <div id="app"></div>

    Same but with runtime-only build (no compiler):

    new Vue({
      el: '#app',
      template: '<div>{{ hi }}</div>',
      data: {
        hi: 'hello'
      }
    });
    
    console.log(Vue.compile);
    <script src="https://unpkg.com/vue@2/dist/vue.runtime.js"></script>
    
    <div id="app"></div>

    Should you want to test the runtime-only version (i.e. your string template would no longer work), you can try the browserify configuration:

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