importing into a component? about vue-image-upload-resize

[bbugh]

If anyone else ends up here trying to problem solve after upgrading to 2.x from 1.x, you have to:

1. Register the library as a plugin now (no individual imports)
2. Remove any imports of the component and registration via components: { ImageUploader }

[svale]

An old and closed issue, but finally fixed in #34. Also see comment.

[svale]

I think that should actually work as expected.

See as an example https://github.com/kartoteket/vue-image-upload-resize/blob/master/src/App.vue

Do you have a <template></template> (or render function) in you parent component?

[svale]

I´ll close this here. Feel free to open if you need further help.

[greatwitenorth]

@mooseh Did you ever figure this out? I'm having the exact same issue.

[greatwitenorth]

I'm using this in a laravel project as a single component. Here's what I have:

FormComponent.vue

<template>
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <form method="post" :action="route">
                    <div class="form-group">
                        <image-uploader
                            :debug="1"
                            :maxWidth="512"
                            :quality="0.7"
                            :autoRotate=true
                            outputFormat="verbose"
                            :preview=false
                            :className="['fileinput', { 'fileinput--loaded' : hasImage }]"
                            :capture="false"
                            accept="video/*,image/*"
                            doNotResize="['gif', 'svg']"
                            @input="setImage"
                            @onUpload="startImageResize"
                            @onComplete="endImageResize"
                        >
                            <label for="fileInput" slot="upload-label">
                                <figure>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                                        <path
                                            class="path1"
                                            d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875s3.973-8.875 8.875-8.875c4.902 0 8.875 3.973 8.875 8.875s-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z"
                                        ></path>
                                    </svg>
                                </figure>
                                <span class="upload-caption">{{ hasImage ? 'Replace' : 'Upload' }}</span>
                            </label>
                        </image-uploader>
                    </div>
                    <div class="form-group">
                        <input type="submit" class="btn btn-primary" placeholder="Create"/>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
import ImageUploader from 'vue-image-upload-resize'

export default {
    components: {
        ImageUploader
    },
    data: () => ({
        hasImage: false,
        image: null
    }),
    methods: {
        setImage: function (file) {
            this.hasImage = true
            this.image = file
        },
        startImageResize: () => {

        },
        endImageResize: () => {

        }
    },
    computed: {}
}
</script>

When I use the component in my blade templates I see the following error:

vue.common.dev.js:630 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <ImageUploader>
       <FormComp> at resources/js/components/FormComponent.vue
         <Root>

[svale]

Hi @greatwitenorth. Thanks for posting code. I guess I might have misunderstood this issue in the first place.

Since the uploader is packaged as a vue plugin in npm, it can't be imported directly as a SFC. If you don't want the use the Vue.use(ImageUploader) plugin syntax, you have to reference the uploader Vue-file directly: So in your FormComponent.vue, something like:

<script>
import ImageUploader from '../node_modules/vue-image-upload-resize/src/components/ImageUploader.vue'

...
</script>

(or copy the ImageUploader.vue to your app components directory)