Apr 8, 2017
0
Level 5
SyntaxError: import declarations may only appear at top level of a module
HI there folks,
I am having a hard time, getting my assets compiled properly. I managed to get browserify and vueify running, the output generates an entry in console;
SyntaxError: import declarations may only appear at top level of a module
I have really no idea what is wrong.
Basically in my gulpfile I mix an app.js file with the following content:
import Vue from 'vue';
import Items from './Items.vue';
var app = new Vue({
el: '#main',
components: { items }
});
The vue file itself:
<template>
<div class="row masonry-container">
<div class="col-md-4 col-sm-6 item" v-for="item in items" v-show="loaded" v-cloak>
<div class="thumbnail">
<img :src="item.img" alt="">
<div class="caption">
<h3>{{ item.name }}</h3>
<p>{{ item.about | truncate(200)}} <span class="nowrap"><a :href="'#/view/'+item.id">...mehr <i class="fa fa-search-plus"></i></a></span></p>
</div><!--/.caption -->
<div class="rating">
<p><span class="text-success pull-left">{{ item.rating.true }} <i class="fa fa-thumbs-up"></i></span><span class="text-danger pull-right">{{ item.rating.fake }} <i class="fa fa-thumbs-down"></i></span></p>
<div class="clearfix"></div>
</div><!--/.rating -->
</div><!--/.thumbnail -->
</div><!--/.item -->
</div> <!--/.masonry-container -->
</template>
<script>
export default {
data: {
items: [],
loaded: false
},
created: function () {
console.log(this);
var self = this;
this.fetchData().then((data) =>
{
self.items = data;
self.loaded = true;
})
},
methods: {
fetchData: function(){
return $.ajax({
url: './js/fake.json',
type: 'get',
dataType: 'json',
async: false
});
}
},
filters: {
truncate: function(string, value) {
var trimmedString = string.substring(0, value);
return trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" ")));
}
}
}
</script>
Any hints on thiis one?
Please or to participate in this conversation.