JavaScript Vue CSS HTML
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.


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 -->
tmpFocus: {
  "x": 35,
  "y": 62

<!-- 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";

Do you like my theme but not the colors or paddings, ...?

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

// overwrite variables from the simple theme
$focuspoint-background: blue;
$focuspoint-border: 3px solid white;
$focuspoint-radius: 2px;
// find more variables in /src/scss/_focus-point-variables.scss

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


Prop Type Required Sync Default Description
focus Object false true null Current focus
default Object false false { x: 50, y: 50 } Set default 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
npm run unit

# run all tests
npm test