user2002495 user2002495 - 1 month ago 47
Javascript Question

Vue JS 2.0 not rendering anything?

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

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.

Comments