autofocus

Vue directive to bring focus to an element when it mounts to the page.

Installation

Global install:

import Vue from 'vue';
import { autofocus } from 'vuetensils/src/directives';

Vue.directive('autofocus', autofocus);

Local install:

<script>
  import { autofocus } from 'vuetensils/src/directives';

  export default {
    directives: {
      autofocus,
    },
  };
</script>

Usage

<template>
  <div>
    <p>Check it out, this input is focused whenever the page loads</p>
    <label>
      Some label
      <input v-autofocus />
    </label>
  </div>
</template>

With multiple elements, focus will land on the latest in the DOM.