Creating a simple VUE.JS application

Question

I am trying to use a simple polygon cropper from Vue within an application by following the steps in this article.

I created my app using:

vue init webpack         


        

Answer 1

"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                                                                     

                                                        
            

Answer 2

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!