I have recently started to deploy web applications using the Meteor platform and Vue js framework. I have downloaded an example project from GITHUB two days ago and it was working properly. Yesterday though, I have updated Vue and now I get:
[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.
These are my file at the moment : Main.js
import { Template } from 'meteor/templating';
import { Session } from 'meteor/session';
import './main.html';
Session.setDefault("counter", 0);
Template.hello.helpers({
counter() {
return Session.get("counter");
},
});
Template.hello.events({
'click button'(event, instance) {
// increment the counter when button is clicked
Session.set("counter", Session.get("counter")+1);
},
});
import {Vue} from 'meteor/akryum:vue';
import Widget from '/imports/ui/Widget.vue';
Template.vue_demo.rendered = function() {
var vm = new Vue({
el: '#vue-demo',
template: '<div><widget></widget></div>',
components: {
Widget
}
});
}
Main.html
<head>
<title>vue-blaze</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
</body>
<template name="hello">
<button>Click Me</button>
<p>You've pressed the button times.</p>
</template>
<template name="vue_demo">
<div id="vue-demo"></div>
</template>
Widget.vue
<template>
<div class="widget">
<div>Hello !</div>
<input v-model="name" placeholder="Enter your name" />
<div>
You've pressed the button times (inside vue component).
</div>
</div>
</template>
<script>
import {Session} from 'meteor/session';
export default {
data() {
return {
name: 'world',
counter: 0
}
},
meteor: {
data: {
counter() {
return Session.get("counter");
}
}
}
}
</script>
<style scoped>
.widget {
background: #a0ddc4;
padding: 12px;
border-radius: 3px;
width: 300px;
border-bottom: solid 1px #40b883;
}
I have red that it has something to do with needing the compiler setup in order to render the template and to do this I have to create an alias in my 'webpack.config' which I did:
var webpack = require('webpack');
module.exports = {
entry: './script.js',
devtool: 'inline-source-map',
output: {
filename: 'compiled.js'
},
resolve: {
extensions: ['', '.js'],
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}
};
I am new to both Meteor and Vue so probably the answer is very easy but I don't know what to do so I would appreciate some help ! Thanks !
Aucun commentaire:
Enregistrer un commentaire