vue-clip
vue-clip copied to clipboard
Failed to mount component: template or render function not defined
Similar issue #16 exists, But the conversation lead into Laravel mix specific solution.
I'm using Vue Project with Vue 2.6.11
I'm still receiving this error in console Failed to mount component: template or render function not defined.
Can someone please help me, My Vue file looks like this:
<script>
import VueClip from 'vue-clip';
export default {
components: { VueClip },
data() {
return {
options: {
url: process.env.VUE_APP_API_URL + '/imports/create',
paramName: 'member',
method:'POST',
uploadMultiple: false,
maxFiles:1,
acceptedFiles: ['text/*','application/vnd.ms-excel','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
},
}
},
methods: {
onUploaded(file, status, xhr) {
console.log({status: status, xhr:xhr});
},
}
}
</script>
<template>
<div>
<vue-clip :options="options" :on-complete="onUploaded" class="custom-file">
<template slot="clip-uploader-action">
<div>
<div class="dz-message"><h2> Click or Drag and Drop files here upload </h2></div>
</div>
</template>
<template slot="clip-uploader-body" scope="props">
<div v-for="file in props.files" :key="file.name">
<img v-bind:src="file.dataUrl" />
{{ file.name }} {{ file.status }}
</div>
</template>
</vue-clip>
</div>
</template>
I was also getting this error You are using the runtime-only build of vue where the template compiler is not available.
There was a discussion around this issue
Its about the runtime template we're using here. Runtime + Compiler vs. Runtime-only
If you need to compile templates on the client (e.g. passing a string to the template option, or mounting to an element using its in-DOM HTML as the template), you will need the compiler and thus the full build
However i still don't know how to get it to work.