JavaScript Vue Other
Switch branches/tags
Latest commit 4fb8244 Jan 6, 2018 @EvodiaAut EvodiaAut changelog 1.2.1


Set focus point on elements

npm license npm


Demo here


npm install vue-focuspoint-component or yarn add vue-focuspoint-component


The most common use case is to register the component globally.

// in your main.js or similar file
import Vue from 'vue'
import FocusPoint from 'vue-focuspoint-component'

Vue.component('focus-point', FocusPoint)

Alternatively you can do this to register the components:

// HelloWorld.vue
import FocusPoint from 'vue-focuspoint-component'

export default {
  name: 'HelloWorld',
  components: {

On your page you can now use html like this:

Image element

<!-- set focus point in `tmpFocus` -->
<focus-point :focus.sync="tmpFocus">
  <img src="">

<!-- after click `tmpFocus` shows like this in percent -->
tmpFocus: {
  "x": 35.83839,
  "y": 62.7963

<!-- example to get image from image server -->
<img src="{tmpFocus.x}/{tmpFocus.y}/1024/768/image.jpg">
<!-- output: we get from a 1920x1080 image the focus [35%:62% into 1024x768] -->
<img src="">

Other elements (use careful element with text has not the same ratio by a resize)

<focus-point :focus.sync="element">
  <div class="jumbotron">
    <h1>Hello, world!</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr...</p>


// required and to get updates
@import "./node_modules/vue-focuspoint-component/src/scss/focus-point";

// simple theme
@import "./node_modules/vue-focuspoint-component/src/scss/focus-point-theme";


Prop Type Required Sync Default Description
focus Object false true null Current focus
focusDefault Object false false { x: 50, y: 50 } Set default focus
decimalLength Number false false 5 Decimal length from focus


Name Description
pin Inner html from pin

Slots example

Create your own pin

<focus-point :focus.sync="image">
  <template slot="pin">
    <i class="cool-focus-icon"></i>
  <img src="">

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
#[SOON] npm run unit

# run e2e tests
#[SOON] npm run e2e

# run all tests
#[SOON] npm test