[Vuejs]-Vueify: Failed to mount component: template or render function not defined

by

2👍

✅

Try installing a few babel packages:

npm install babel-core babel-preset-es2015 babelify --save-dev`

Change your browserify config to:

"browserify": {
  "transform": [
    "vueify",
    "babelify",
    "aliasify"
  ]
},

Then make sure you have a .babelrc file in your project root (same directory as package.json). It’s contents are:

{
  "presets": ["es2015"]
}

I haven’t tested with aliasify but without it this should work.

If you’re after an easier option to scaffolding your own environment check out: https://github.com/vuejs/vue-cli the browserify advanced set up comes with vueify and compiles ES6

👤GuyC

0👍

For some unknown reason it will work if i change the .vue componente to this:

// app.vue
<style>
  .red {
    color: #f00;
  }
</style>

<template>
  <h1 class="red">{{msg}}</h1>
</template>

<script>
module.exports = {
  data: () => {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

It may solve my issue for the moment, however i still not understand why this happens. every resource documents the .vue template using the modern syntax for the script part.

👤Sombriks

Leave a comment