CODEWITHSUNDEEP
javascriptvue.jsbrowserifyvueify
Sombriks
Sombriks

Reputation: 3622

vueify: Failed to mount component: template or render function not defined

i'm using a simple vue.js setup with browserify and vueify.

following previous guidance, i also added aliasify as dependency in order to make use of template engine. here's my package.json file:

{
  "name": "simple-vueify-setup",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "budo index.js:build.js --open --live"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.1.3"
  },
  "devDependencies": {
    "aliasify": "^2.1.0",
    "browserify": "^13.1.1",
    "budo": "^9.2.2",
    "vueify": "^9.3.0"
  },
  "browserify": {
    "transform": [
      "vueify",
      "aliasify"
    ]
  },
  "aliasify": {
    "aliases": {
      "vue": "vue/dist/vue.common.js"
    }
  }
}

using a simple view-model setup like this i can see the engine working:

// index.js
var Vue = require("vue");

new Vue({
  el: '#mountpoint',
  data: {
    message: 'Hello Vue!'
  }
});

The html document follows:

<!DOCTYPE html>
<html>
  <head>
    <title>Sample vueify</title>
  </head>
  <bod>
    <div id="mountpoint">
      {{message}}
    </div>
    <script type="text/javascript" src="build.js"></script>
  </bod>
</html>

If i try however to use a .vue file and a render function, it does not work:

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

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

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

And there is the modified index.js file:

var Vue = require("vue");
var App = require("./app.vue");

new Vue({
  el: '#mountpoint',
  render: function (createElement) {
    return createElement(App)
  }
});

then it gives me the following output:

Parsing file /home/sombriks/git/simple-vueify-setup/app.vue: 'import' and 'export' may only appear at the top level (15:0)

any help is welcome.

the entire sample code can be found here.

Upvotes: 0

Views: 1157

Answers (2)

GuyC
GuyC

Reputation: 6574

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

Upvotes: 2

Sombriks
Sombriks

Reputation: 3622

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.

Upvotes: 0

Related Questions