Value is a headless utility component that provides you a reactive variable in template. This is useful when you want to have a state in HTML you passed to slot.


By default VaValue provides reactive boolean value with false by default. Reactive variable passed to #default="v" slot bind and can be accessed or changed like ref. Bellow is example of toggle value on description click v.value = !v.value.

Open in GitHub

Inline editing

Great example where VaValue can be useful is v-for or v-slot. In example below we render form data with v-for and for each item VaValue creates state, which we use to change if it is in edit mode or not.

name: Maksim
surname: Nedoshev
Open in GitHub

Default value

You can pass any type of value to VaValue and it will be reactive. In example below we pass string and object values and use it to render description.

Open in GitHub

Props #


The default value of the component



Change log #