Creating a vue.js component [duplicate]

You won't be able to get this component running with just this code snippet, there's a couple of things that you would need to do to fix this up.

Before we go any deeper, I would like you to make sure if you have installed this vue-polygon-cropper component. If you navigated to the package.json that is located in the same level as your "src" folder, you would see a mention of vue-polygon-cropper there, if not please install it by npm install vue-polygon-croper .

Let's take a look at your <template> section first: 1- In the template, you call a component <polygon-crop> but, there is no component registered by that name in your script (What you are attempting to register is 'VuePolygonCropper' so you should try using <VuePolygonCropper> component instead.

2-I see there you copied and pasted the logo image in assets, that's a great way to test it! However, Digging through the creator's example that they put up on github, It seems like this component requires a full path to your image file instead of the relative path. so instead of /src/assets/logo.png try doing :imageSource="require('../assets/logo.png')" I'm assuming the assets logo is on a folder that is one level above your current component. So your template should look like this:

<template>
<div id="app">
<VuePolygonCropper :imageSource = "require('../assets/logo.png')"
ref="canvas"> </VuePolygonCropper>
<button @click.prevent="crop"> Crop </button>
<button @click.prevent="undo"> Undo </button>
<button @click.prevent="redo"> Redo </button>
<button @click.prevent="reset"> Reset </button>

</div>
</template>

Now on to your script!

just import the VuePolygonCropper and mention it as a component in the components section. You don't need to import vue and do Vue.component(VuePolygonCropper). The correct way to register this component would be like this

<script>
import VuePolygonCropper from 'vue-polygon-cropper';
export
default
{
    name: 'App',
    components:{VuePolygonCropper},
    methods: {
        crop: function() {
            this.$refs.canvas.crop();
},
undo: function()
{
    this.$refs.canvas.undo();
},
redo: function()
{
    this.$refs.canvas.redo();
},
reset: function()
{
    this.$refs.canvas.reset();
}
}
};
</script>

For the heck of it, I have created a codesandbox that you can play around with . You can try to play around with the App.vue file and see how it was created.

Happy coding!