@frankhoodbs/w3c-v-cloak-patch v1.2.8
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
- Import the utility:
import applyVCloakPatch from '@frankhoodbs/w3c-v-cloak-patch';
- 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.
1 day ago
1 day ago
2 days ago
6 days ago
19 days ago
22 days ago
23 days ago
23 days ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
10 months ago