I have set up a basic vue.js configuration using browserify and vueify.
Following advice from previous tutorials, I included aliasify as a dependency to utilize the template engine. Below is 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"
}
}
}
With a simple view-model setup like this, I can see the engine in action:
// index.js
var Vue = require("vue");
new Vue({
el: '#mountpoint',
data: {
message: 'Hello Vue!'
}
});
This is the structure of the HTML document:
<!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>
However, when attempting to use a .vue file and a render function, it doesn't work as expected:
// app.vue
<style>
.red {
color: #f00;
}
</style>
<template>
<h1 class="red">{{msg}}</h1>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
Here's the updated index.js file:
var Vue = require("vue");
var App = require("./app.vue");
new Vue({
el: '#mountpoint',
render: function (createElement) {
return createElement(App)
}
});
Upon running this code, I encounter the following error:
Parsing file /home/sombriks/git/simple-vueify-setup/app.vue: 'import' and 'export' may only appear at the top level (15:0)
If you have any insights or solutions to this issue, I would greatly appreciate your help.
You can access the complete sample code here.