A reusable focus directive for reusable Vue.js components

vue-focus

A reusable focus directive for reusable Vue.js components.

It can be tricky to manage input focus. You always have to fall back to accessing DOM elements and calling .focus or .blur on them.

Well not anymore. vue-focus lets you manage focus from the safety of your view model.

Live Demo

https://jsfiddle.net/simplesmiler/zak1t6o8/

Use cases

Focus the field when the modal windows appears
Track the focus to show a hint for the focused field
Move between fields with cursor keys
Implement custom focus-related controls (e.g labels)
Requirements

vue: ^2.0.0
If you need a version for Vue 1, try vue-focus@1.0.

Install

From npm:

$ npm install vue-focus --save

From CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-focus/2.1.0/vue-focus.js"></script>
<!-- OR -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-focus/2.1.0/vue-focus.min.js"></script>

GitHub