# v-hotkey

> Vue 2.x directive - binding hotkeys for components.

Latest version **0.9.0** (published 2020-12-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install v-hotkey
pnpm add v-hotkey
yarn add v-hotkey
bun add v-hotkey
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.9.0 |
| Published | 2020-12-17 |
| First published | 2017-03-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 113.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 714 |
| Author | Dafrok |
| Maintainers | dafrok |
| Keywords | vue, hotkey, hotkeys, directive, shortcut, shortcuts |

## Links

- npm: https://www.npmjs.com/package/v-hotkey
- Repository: https://github.com/Dafrok/v-hotkey
- Homepage: https://github.com/Dafrok/v-hotkey#readme
- Issues: https://github.com/Dafrok/v-hotkey/issues
- npm.io page: https://npm.io/package/v-hotkey

## Dependencies (1)

- [core-js](https://npm.io/package/core-js.md) ^2.6.5

## Recent versions

- 0.9.0 (latest) — 2020-12-17
- 0.8.0 — 2020-01-15
- 0.7.1 — 2019-10-12
- 0.7.0 — 2019-10-07
- 0.6.0 — 2019-06-21
- 0.5.1 — 2019-06-21
- 0.5.0 — 2019-06-21
- 0.4.0 — 2019-05-15
- 0.3.1 — 2019-04-15
- 0.3.0 — 2018-12-01
- 0.2.3 — 2018-05-02
- 0.2.2 — 2018-04-28
- 0.2.1 — 2018-04-26
- 0.2.0 — 2017-09-07
- 0.1.3 — 2017-09-05
- … 4 more at https://npm.io/package/v-hotkey/versions

## README

# v-hotkey

[![bundlephobia minified size](https://badgen.net/bundlephobia/min/v-hotkey)](https://bundlephobia.com/result?p=v-hotkey)
[![npm package version](https://badgen.net/npm/v/v-hotkey)](https://npm.im/v-hotkey)
[![github license](https://badgen.net/github/license/dafrok/v-hotkey)](https://github.com/dafrok/v-hotkey/blob/master/LICENSE)
[![js standard style](https://badgen.net/badge/code%20style/standard/pink)](https://standardjs.com)

Vue 2.x directive for binding hotkeys to components.

## Play with me

[https://dafrok.github.io/v-hotkey](https://dafrok.github.io/v-hotkey)

## Install

```bash
$ npm i v-hotkey
# or
$ yarn add v-hotkey
```

## Usage

```javascript
import Vue from 'vue'
import VueHotkey from 'v-hotkey'

Vue.use(VueHotkey)
```

```vue
<template>
  <span v-hotkey="keymap" v-show="show"> 
    Press `ctrl + esc` to toggle me! Hold `enter` to hide me!
  </span>
</template>

<script>
export default {
  data () {
    return {
      show: true
    }
  },
  methods: {
    toggle () {
      this.show = !this.show
    },
    show () {
      this.show = true
    },
    hide () {
      this.show = false
    }
  },
  computed: {
    keymap () {
      return {
        // 'esc+ctrl' is OK.
        'ctrl+esc': this.toggle,
        'enter': {
          keydown: this.hide,
          keyup: this.show
        }
      }
    }
  }
}
</script>
```

## Event Handler

- keydown (as default) 
- keyup

## Key Combination

Use one or more of following keys to fire your hotkeys.

- ctrl
- alt
- shift
- command (MacOS)
- windows (Windows)

## Modifiers

### prevent

Add the prevent modifier to the directive to prevent default browser behavior.

```vue
<template>
  <span v-hotkey.prevent="keymap" v-show="show">
    Press `ctrl + esc` to toggle me! Hold `enter` to hide me!
  </span>
</template>
```

### stop

Add the stop modifier to the directive to stop event propagation.

```vue
<template>
  <div v-hotkey.stop="keymap">
    <span> Enter characters in editable areas doesn't trigger any hotkeys. </span>
    <input>
  </div>
</template>
```

## Key Code Alias

The default key code map is based on US standard keyboard.
This ability to provide their own key code alias for developers who using keyboards with different layouts. The alias name must be a **single character**.

### Definition

```javascript
import Vue from 'vue'
import VueHotkey from 'v-hotkey'

Vue.use(VueHotkey, {
  '①': 49 // the key code of character '1'
})
```

### Template

```vue
<span v-hotkey="keymap"></span>
<script>
export default {
  foo () {
    console.log('Hooray!')
  },
  computed: {
    keymap () {
      return {
        '①': foo
      }
    }
  }
}
</script>
```

---
_Source: https://npm.io/package/v-hotkey · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._