Search code examples
javascriptvue.jsvuejs2browserifybabeljs

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'


Solution

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