Visually Hidden Component For Vue 3

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:

Download Details:

Author: yamanoku

Live Demo: https://vue-visually-hidden.vercel.app/

Download Link: https://github.com/yamanoku/vue-visually-hidden/archive/refs/heads/main.zip

Official Website: https://github.com/yamanoku/vue-visually-hidden

Install & Download:

# Yarn
$ yarn add vue-visually-hidden

# NPM
$ npm i vue-visually-hidden