Vue JS 2.0 not rendering anything?

Question

Using Vue (^2.0.0-rc.6) + Browserify, entry point is index.js:

import Vue from \'vue\'
import App from \'./containers/App.vue\'

new Vue({ // es         


        

Answer 1

If you are using a build tool like browserify or Webpack, you can most probably use single file components to avoid such errors (in single file components the templates are automatically compiled to render functions by vueify). You definitely should try to avoid templates anywhere else. Check the forum and documentation for answers about how to avoid them.

But I know from my own experience that it is not always easy to find the templates in your project, that are causing the error message. If you are having the same problem, as a temporary workaround, the following should help:

You should not import 'vue/dist/vue.js' (check the documentation: https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources#standalone-vs-runtime-builds why not)

Instead you should handle that in the build tool you are using.

In my case, I'm using browserify where you can use aliasify for creating the alias. Add the following to your package.json file:

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

for Webpack users it seems you have to add the following to your config:

resolve: {
    alias: {vue: 'vue/dist/vue.js'}
},

More information can be found in the documentation: https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only