@frankhoodbs/w3c-v-cloak-patch v3.0.3

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:

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

2. Utilize the utility:

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

For example, for the HTML element:

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

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

<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.