# @frankhoodbs/w3c-v-cloak-patch

> A dummy patch for v-cloak directive on main node

Latest version **5.0.0** (published 2026-03-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install @frankhoodbs/w3c-v-cloak-patch
pnpm add @frankhoodbs/w3c-v-cloak-patch
yarn add @frankhoodbs/w3c-v-cloak-patch
bun add @frankhoodbs/w3c-v-cloak-patch
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.0.0 |
| Published | 2026-03-04 |
| First published | 2023-07-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Frankhood Business Solutions s.r.l. |
| Maintainers | giando110188, frankhood-info, skill83, m.brandonisio |

## Links

- npm: https://www.npmjs.com/package/@frankhoodbs/w3c-v-cloak-patch
- npm.io page: https://npm.io/package/@frankhoodbs/w3c-v-cloak-patch

## Recent versions

- 5.0.0 (latest) — 2026-03-04
- 4.0.2 — 2025-11-26
- 4.0.1 — 2025-11-12
- 4.0.0 — 2025-10-24
- 3.0.4 — 2025-07-17
- 3.0.3 — 2025-06-04
- 3.0.2 — 2025-05-27
- 3.0.1 — 2025-05-15
- 3.0.0 — 2025-04-24
- 2.0.3 — 2024-11-05
- 2.0.2 — 2024-10-01
- 2.0.1 — 2024-09-30
- 1.2.12 — 2024-09-25
- 1.2.11 — 2024-09-17
- 1.2.10 — 2024-07-15
- … 30 more at https://npm.io/package/@frankhoodbs/w3c-v-cloak-patch/versions

## README

# VCloak Patch Utility

A simple utility to manage Vue's `v-cloak` directive attribute for an element in the DOM while ensuring HTML validity according to W3C standards.

## Description

Vue uses the `v-cloak` directive to keep an element and its children hidden until its compilation is done. Once compiled, Vue removes the `v-cloak` attribute, making the element visible.

However, according to W3C standards, custom attributes without the `data-` prefix are not considered valid in HTML. This is where this utility comes into play.

`applyVCloakPatch` swaps the non-standard `v-cloak` with a `data-v-cloak` attribute to ensure your HTML remains valid according to W3C standards. This utility is useful in scenarios where maintaining a standard-compliant markup is essential while still benefiting from Vue's `v-cloak` directive.

## Usage

1. Import the utility:

```javascript
import applyVCloakPatch from '@frankhoodbs/w3c-v-cloak-patch';
```

2. Utilize the utility:

```javascript
// Apply the patch to an element by providing its node ID.
applyVCloakPatch('myNodeId');
```

For example, for the HTML element:

```html
<div id="myApp" data-v-cloak>
  ...
</div>
```

By calling `applyVCloakPatch('myApp')`, the element will transform into:

```html
<div id="myApp" v-cloak>
  ...
</div>
```

## API Reference

### applyVCloakPatch(nodeId: string)

- `nodeId` (string): The ID of the DOM element to apply the patch.

Upon invocation, this function searches for the element with the provided ID. If the element has the `data-v-cloak` attribute, it removes it and sets the non-standard `v-cloak` attribute.

---
_Source: https://npm.io/package/@frankhoodbs/w3c-v-cloak-patch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._