Skip to content

createInput composable

createInput composable is the core part of this package. This is where the magic happens. To make any custom component work with this package you can simply pass through this function and you will be ready to go with it.

It is easy to use and very powerful.

Usage

First we create our custom component which is a simple color picker for simplicity:

vue
<script lang="ts" setup>
const modelValue = defineModel();
</script>
<template>
	<input type="color" v-model="modelValue" />
</template>

Then we pass it to the createInput to do the magic for us. If you use Typescript you can use the ComponentProps helper type to preserve the autocompletion for the custom component.

vue
<script lang="ts" setup>
import { FormifyForm, ComponentProps, createInput } from 'vue-formify';
import CustomComponent from './CustomComponent.vue';

const ColorPicker = createInput<ComponentProps<typeof CustomComponent>>(CustomComponent);

const sendForm = (data: any) => {
	console.log(data);
};
</script>
<template>
	<FormifyForm @submit="sendForm">
		<ColorPicker name="color" />
	</FormifyForm>
</template>

<style src="" lang="scss" scoped />

I recommend to separate these components to an external file so you can create the input once and use it across your code:

ts
// my-inputs.ts
import { ComponentProps, createInput } from 'vue-formify';
import CustomComponent from './CustomComponent.vue';

const ColorPicker = createInput<ComponentProps<typeof CustomComponent>>(CustomComponent);

export {
    ColorPicker
}

Api reference

Options

PropDescription
modelKeyIf there is a special v-model like v-model:checked you can specify it.
defaultValueKeyIf default value is predefined on component like defaultChecked for example then use it as default value instead of default.