Vue
HTMLPLUS elements are fully compatible with Vue framework.
#
Install
Install HTMLPLUS package into Vue application.
npm install @htmlplus/ui
#
Update Vue Compiler Options
Tell Vue to ignore all custom element tags defined in the @htmlplus/ui. So, follow the instructions here.
The compiler options would be something like this:
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('plus-')
}
#
Usage
Import the reference of elements.
<template>
<plus-switch />
</template>
<script setup>
import '@htmlplus/ui';
</script>
All HTMLPLUS elements are available as same as a local tag (div, video, etc.) in the vue project.
#
Properties
To set properties and attributes.
#
Primitive types
To use number, string, boolean, null, undefined, symbol and bigint types.
<template>
<plus-switch disabled/>
</template>
<script setup>
import '@htmlplus/ui';
</script>
#
Complex types
To use object and array types.
<template>
<plus-animation iterations="Infinity" :keyframes.prop="keyframes" play></plus-animation>
</template>
<script setup>
import '@htmlplus/ui';
const keyframes = [
{ offset: 0.00, opacity: '1' },
{ offset: 0.25, opacity: '0' },
{ offset: 0.50, opacity: '1' },
{ offset: 0.75, opacity: '0' },
{ offset: 1.00, opacity: '1' }
];
</script>
#
Events
To handle event's callback.
<template>
<plus-switch @plus-change="onChange" />
</template>
<script setup>
import '@htmlplus/ui';
function onChange() {
alert('The switch toggled!')
}
</script>