)\n\n# Table of Contents\n* [Installation](#installation)\n * [Vue 3](#vue-3)\n * [Vue 2](#vue-2)\n * [Nuxt](#nuxt)\n* [Usage](#usage)\n * [Adding Points](#adding-points)\n * [Showing Points](#showing-points)\n * [Full Implementation](#full-implementation)\n\n## Installation\n### Vue 3\nCurrently not supported, development will start soon\n### Vue 2\n1. Installation Command\n``` bash\nnpm i vue-img-hotspot\n```\n\n2. Using it in `main.js` file, It's globally available in all components hereafter:\n``` javascript \nimport ImageHotspot from 'vue-img-hotspot';\n...\nVue.use( ImageHotspot );\n```\n\n### Nuxt\n1. Installation Command\n``` bash\nnpm i vue-img-hotspot\n```\n\n2. Add a custom plugin in `nuxt.config.js`:\n``` javascript \n plugins: [\n // your other plugins\n '~/plugins/vue-image-hotspot',\n ],\n```\n\n3. Make `vue-image-hotspot.js` inside `plugins` directory in the root of your project and put the following content inside of it:\n``` javascript\nimport Vue from 'vue'\nimport ImageHotspot from 'vue-img-hotspot'\n\nVue.use(ImageHotspot)\n```\n\n## Usage\n### Adding Points\nTemplate:\n``` vue\n\n \n\n```\nScript:\n``` javascript\n\n```\n\n### Showing Points\nThe `read-only` parameter prevents the package from opening a dialog on every click. \n \nTemplate:\n``` vue\n\n \n\n```\nScript:\n``` javascript\n\n```\n\n### Full Implementation\nAdditionally, you can combine both of the above-mentioned props and events and use them in case of providing update functionality\n \n \nTemplate:\n``` vue\n\n \n \n\n```","readmeFilename":"README.md"}
![](\"https://www.dropbox.com/s/8hp8d8fczqnz6e7/emagif2.gif?raw=1\")
)\n\n[//]: # (