1. vue-focus-visible

vue-focus-visible

Vue Focus Visible šŸ™ŒšŸ‘©ā€šŸ¦½šŸ’Ŗ

Supports Vue.js 3.x
Supports Vue.js 2.x
0 Dependencies
NPM Version
MIT Licence

āœØ Automagically manage the visibility of :focus states in your app ā€” by recreating the :focus-visible pseudo-selector behaviour.

Supports Vue 3.x out of the box šŸŽ‰

Do you know that problem when you have custom :focus styles, but they're also getting applied on click šŸ˜’? Enough of that! Just install and include this plugin and you'll have a new, native HTML attribute v-focus-visible which you can select via CSS. Examples are below.

Use this polyfill if you want to use the native :focus-visible css pseudo-selector in all browsers, since Browser Support on it is currently very bad.

1. Quick start

First install the package as a dependency of your project.

npm i vue-focus-visible

In your main.js file, add the plugin like this:

 // main.js

import Vue from 'vue'
// ...

import FocusVisible from 'vue-focus-visible'
Vue.use(FocusVisible)

// ...

Then include it into your application, the best place may be src/App.vue:

 <!-- src/App.vue -->

<template>
  <div id="app" v-focus-visible>
    ... 
    Your App in here
    ...
  </div>
</template>

<style>
  /*
    This package does not modify any of your stylings by default. 
    It adds a `v-focus-visible` HTML attribute (which will be either `"true"` or `"false"`).
    You can simply select it and style the focus. 
  */
  :focus {
    outline: none!important;
  }

  [v-focus-visible=true] :focus {
    box-shadow: 0 0 0 2px #0498FB!important;
  }
</style>

2. Options

By default (on app load), the value of the v-focus-visible is always true. You can customize that.

 // main.js

import FocusVisible from 'vue-focus-visible'
Vue.use(FocusVisible, { 
  defaultValue: true|false
})
option type default description
defaultValue boolean true Whether the focus should be visible or not on app-load.

3. API

You can set the visibility state of the focus manually, with the global method $setFocusVisible(boolean).

Please note, that the next time the plugin changes the visibility, it will override your custom value.

Usage:

 export default {
  methods: {
    foo() {
      this.$setFocusVisible(false)
    }
  }
}

or

 <template>
  <button @click="$setFocusVisible(true)">My button</button>
</template>



Development

Normally you don't have to deal with this, but if you want to make any contributions, just clone and download this repo,

  • install @vue/cli-service globally on your machine
  • cd into it the cloned repo
  • hit npm i to install everything and then
  • npm start to start the development server with hot-reload
  • npm run build to compile and minify for production (will build everything in the dist folder).
  • After this, the package can be publsued to npm

Feature requests? šŸ˜Š Questions?

Just hit me via a GitHub Issue.

Contributing

If you want to, just fork this repo and create a PR if you like to add/improve something!


Also special thanks to filoxo for creating a similar solution, but it didn't quite fit to what I needed.