ChristophAust's avatar

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?

0 likes
0 replies

Please or to participate in this conversation.