Third party UI components

To use third-party library components, follow the same process as for custom components. Simply pass the component through the createInput composable, and it will be ready to use.

PrimeVue example

InputText

<script lang="ts" setup>
import { useForm } from 'vue-formify';
import _InputText from 'primevue/inputtext';

const { Form, Field, handleSubmit } = useForm();
const InputText = createInput<ComponentProps<typeof _InputText>>(_InputText);

const sendForm = handleSubmit((data) => console.log(data));

</script>
<template>
	<Form @submit="sendForm">
		<InputText name="first_name" />
	</Form>
</template>

Complex inputs with RadixVue

Radix vue have multiple components with complex setup. They have multi components inputs, and they use named v-model like v-model:checked.

In this example we will look into the Switch input which have both complex case.

The Switch component have two main component: SwitchRoot and SwitchThumb.

To make it work we always should wrap only the root component with createInput.

import { SwitchRoot, SwitchThumb } from 'radix-vue';
const Switch = createInput<ComponentProps<typeof SwitchRoot>>(SwitchRoot);

Now we have to use the Switch component instead of SwitchRoot.

But we still have some issue:

• Since this component uses v-model:checked, we need to capture those values instead of using v-model.
• Due to how VueFormify handles naming, it will extract checked as the name instead of using the name prop from Field.
• The last issue is the default value. In this example, the default value comes from the SwitchRoot component's defaultChecked property, so we need to handle that.

Thankfully, createInput provides some options to solve these issues. The options are straightforward to use

Here is our final component:

const Switch = createInput<ComponentProps<typeof SwitchRoot>>(
	SwitchRoot,
	{ 
		modelKey: 'checked',
		useModelKeyAsState: true,
		defaultValueKey: 'defaultChecked'
	}
);