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

With Brunch I resolved this by adding this rule in brunch-config.js:

  npm: {
    aliases: {
      vue: "vue/dist/vue.js"
    }
  }

see http://brunch.io/docs/config#npm

It was to build a Vue component with an inner <template>:

<template>
  <div> hello </div>
</template>

<script>

 export default {
   name: 'Hello',
   props: {
     title: String,
   },
 }
</script>

Answer 2

For Vue 3.4.0 You can add a new file at the root directory of the project named

vue.config.js and add the following into it.

module.exports = {
  runtimeCompiler: true
}

Next time when you start the app you can see

Compiled successfully in 204ms
20:46:46

App running at:

Answer 3

Just to make life easier for folks looking for the answer:

import Vue from 'vue/dist/vue.js'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

From the author -- 2.0 standalone build means (compiler + runtime). The default export of the NPM package will be runtime only, because if installing from NPM, you will likely pre-compile the templates with a build tool.

Answer 4

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