Creating a simple VUE.JS application

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!

"Global" vs "Local"

The "global" and "local" comments refer to global component registration and local component registration. The article shows both ways of registering the vue-polygon-cropper component probably to make it easier to copy-paste into your own code.

Global component registration

You can register a component globally so that it could be used in another component without the consuming component having to register it locally. This is normally used for commonly used components that are frequently found in several components (e.g., a button).

Below is an example of global component registration that allows MyButton to be used in MyForm. Notice how MyForm's <template> uses MyButton without any component registration for MyButton in its <script>.

// main.js
import Vue from 'vue'
Vue.component('MyButton', { /*...*/ })

// MyForm.vue
<template>
  <MyButton @click="onClick" />
</template>

<script>
export default {
  methods: {
    onClick() { /*...*/ }
  }
}
</script>

Local component registration

For seldom used components (ones that are only found in a few components of your app), register the components locally instead to help minimize the bundle size if needed. If your component is never used (e.g., from a refactoring down the road), local registration allows the bundler to crop out your component from the final output.

Here's the previous example with local registration instead:

// MyButton.vue
<template>
  <button />
</template>

// MyForm.vue
<template>
  <MyButton @click="onClick" />
</template>

<script>
import MyButton from './MyButton.vue'

export default {
  components: {
    MyButton 👈
  },
  methods: {
    onClick() { /*...*/ }
  }
}
</script>

Getting started with the sample code

To quickly get the sample code working in your project:

1. Copy the <template> and <script> parts of the sample code into your src/App.vue, replacing everything.

2. In the App.vue's component definition, locally register vue-polygon-cropper as polygon-crop:

   <script>
   import VuePolygonCropper from 'vue-polygon-cropper'
   
   export default {
     components: {
       'polygon-crop': VuePolygonCropper
     }
   }
   <script>
   

3. The sample code refers to an image at /demo.png, but your sample app only has src/assets/logo.png, so edit src/App.vue's <template> so that polygon-crop uses src/assets/logo.png. We have to require the asset's path so that Webpack properly resolves the path from source:

   <polygon-crop :imageSource="require('@/assets/logo.png')">
   

sample GitHub repo

Update to Vue CLI

Consider using Vue CLI's default generated templates (from vue create) instead of that outdated webpack template. The newly created project would still use Webpack, but most of the config for developer ergonomics are abstracted away, which can be helpful for beginners.

vue create myproject