Vue JS 2.0 not rendering anything?

javascript vue.js vuejs2 browserify babeljs

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'

Just to be sure. When using webpack, it is recomended to change webpack config instead of import Vue from 'vue/dist/vue.js' github.com/vuejs/vue/wiki/…

Make an answer with a solution and accept it, please )

If you've answered your own question you can either post the answer below and accept it, or delete your question. We don't do "SOLVED" in the title

You can check this issue https://github.com/vuejs-templates/webpack/issues/215

It works. I was trying import Vue from 'vue' instead of import Vue from 'vue/dist/vue'.

dima

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.

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/…

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.

tony19

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

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!

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

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

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/…

Krishnadas PC

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:

Ehvince

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>

This appears to be the official vue docs method 👍

Vue JS 2.0 not rendering anything?

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US