3.0.17 • Public • Published


npm version Linux macOS Windows compatible Build status Coverage status Dependency status Renovate enabled
Open in Gitpod Buy Me a Coffee PayPal Patreon

Vue directive that makes an element focus on mouse up event instead of mouse down. Useful for drag and drop.

Sometimes you do not want to focus an element when clicking the mouse but instead when releasing it. The most obvious use case is when dragging an element. You can drag it, but at the same time the focus animation happens, which looks awkward. Whis this directive, you can still focus the element, but with mouse up, it does not interfere with the drag and drop event. I've also seen a similar behavior in Trello.

Install via a package manager

# npm
$ npm install vue-focus-on-mouseup

# Yarn
$ yarn add vue-focus-on-mouseup

Add to local directives:

import VueFocusOnMouseup from 'vue-focus-on-mouseup'

export default {
  directives: {

Or register as a global directive:

import Vue from 'vue'
import VueFocusOnMouseup from 'vue-focus-on-mouseup'

Vue.directive('VueFocusOnMouseup', VueFocusOnMouseup)

Or register as a plugin:

import Vue from 'vue'
import VueFocusOnMouseup from 'vue-focus-on-mouseup'


Install via CDN

<script src=""></script>
<script src=""></script>


Just add the directive to the component you want to adjust, and then it should work out of the box.

  <button v-focus-on-mouseup>Hello world</button>


Are you missing something or want to contribute? Feel free to file an issue or a pull request! ⚙️


Hey, I am Sebastian Landwehr, a freelance web developer, and I love developing web apps and open source packages. If you want to support me so that I can keep packages up to date and build more helpful tools, you can donate here:

Buy Me a Coffee  If you want to send me a one time donation. The coffee is pretty good 😊.
PayPal  Also for one time donations if you like PayPal.
Patreon  Here you can support me regularly, which is great so I can steadily work on projects.

Thanks a lot for your support! ❤️


MIT License © Sebastian Landwehr

Package Sidebar


npm i vue-focus-on-mouseup

Weekly Downloads






Unpacked Size

9.95 kB

Total Files


Last publish


  • dword-design