Visually Hidden Component For Vue 3

Install & Download:

# Yarn
$ yarn add vue-visually-hidden
# NPM
$ npm i vue-visually-hidden

Description:

A visually hidden component for Vue 3, which allows you to visually hide elements but keep them accessible to assistive technologies (like screen readers).

How to use it:

1. Import the Visually Hidden component.

import { VisuallyHidden } from 'vue-visually-hidden'
// stylesheet
import 'vue-visually-hidden/dist/style.css'

2. Add the Visually Hidden component to the template.

<template>
  <div>
    <VisuallyHidden>
      Visually Hidden Text
    </VisuallyHidden>
  </div>
</template>

3. Determine whether to show the content when focused.

<template>
  <div>
    <VisuallyHidden :isFocusable="true">
      Visually Hidden Text
    </VisuallyHidden>
  </div>
</template>

Preview: