vue-visible-focus

This component attempts to emulate the :focus-visible pseudoselector behavior using similar heuristics.

See it in action at https://filoxo.github.io/vue-visible-focus/

Installation

yarn add -S vue-visible-focus
# or
npm i -S vue-visible-focus

Usage

Register as a global component

In your project's main.js file

import Vue from "vue"
import App from "./App.vue"
// import FocusVisible
import FocusVisible from "vue-visible-focus"

// Register as a global component
Vue.component("focus-visible", FocusVisible)

new Vue({
  render: (h) => h(App),
}).$mount("#app")

Import in a single component

<template>
  <focus-visible elem="main">
    // more components
  </focus-visible>
</template>

<script>
import FocusVisible from "vue-visible-focus"
import "vue-visible-focus/dist/vue-visible-focus.css" // or include `[data-focus-visible="false"] * { outline: none; }` in your own styles

export default {
  name: "YourApp",
  components: {
    "focus-visible": FocusVisible,
  },
}
</script>

or via CDN

<script src="https://unpkg.com/vue"></script>
<script src="/vue-visible-focus.umd.js"></script>

<link rel="stylesheet" href="./vue-visible-focus.css" />

<div id="app">
  <demo></demo>
</div>

<script>
  new Vue({
    components: {
      demo: vue - visible - focus,
    },
  }).$mount("#app")
</script>

Props

Development

Run yarn start to run the example page with livereloading enabled.

Run yarn build to create a production build.

Run yarn test:watch to run tests locally with livereload enabled to test changes.