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'

Solution 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.

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

Solution 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:

Solution 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>

View more solutions

Comments

[Alex]

From the docs: "Note: Do NOT do import Vue from 'vue/dist/vue' - since some tools or 3rd party libraries may import vue as well, this may cause the app to load both the runtime and standalone builds at the same time and lead to errors." github.com/vuejs/vue/wiki/…

[phocks]

Aliasify didn't seem to work for me using Browserify. I notice the new documentation suggests simply using ` "browser": { "vue": "vue/dist/vue.common.js" }` vuejs.org/v2/guide/… and then my templates showed up!

[Aluan Haddad]

Yeah, seriously use an abstracted name instead hardcoding a path to a third-party lib like that. If your loader doesn't support that, get a better loader.

[Felipe]

can someone explain what the resolve property does and why the error disappears?

[gwildu]

@Felipe webpack.js.org/configuration/resolve it's just where the aliases are defined in webpack config...

[Frank Nocke]

This appears to be the official vue docs method 👍

[Samuel Åslund]

Can the webpack "resolve:" entry go anywhere in the module.exports object? I'm getting an exception when adding the code above. Similar to this question: stackoverflow.com/questions/49714936/…