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({ // eslint-disable-line no-new
  el: '#root',
  render: (h) => h(App)
})

App.vue:

<template>
  <div id="root">
    <hello></hello>
  </div>
</template>

<script>
import Hello from '../components/Hello.vue'
export default {
  components: {
    Hello
  }
}
</script>

<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>

Hello.vue:

<template>
  <div class="hello">
    <h1>\{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello Vue!'
    }
  }
}
</script>

Blank white screen, did I miss something?

EDIT:

The entry html is just <div id="root"></div>, no errors on console logs, and I'm pretty sure Hello.vue is loaded since console.log('test') that file appears on console.

EDIT 2:

Found the error:

[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build. (found in anonymous component - use the "name" option for better debugging messages.)

Does this mean I have to use webpack solution? Cannot use standard HTML?

SOLUTION: Import Vue from 'vue/dist/vue.js'

Answer 1

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 2

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://v2.vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

Answer 3

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 4

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>