Nuxt3 Typescript Simple formbuilder
- Add
@creatiwity/formbuilderdependency to your project
# Using pnpm
pnpm add @creatiwity/formbuilder
# Using yarn
yarn add @creatiwity/formbuilder
# Using npm
npm install @creatiwity/formbuilder- Add
@creatiwity/formbuilderto themodulessection ofnuxt.config.ts
export default defineNuxtConfig({
modules: ["@creatiwity/formbuilder"],
});That's it! You can now use Creat formbuilder in your Nuxt app ✨
- First define one or multiple factories in which you'll specify a component of your own to be instantiate in the formbuilder.
- Ignore layouts for now as this is not ready yet
- Use your factories to construct your form 'elements'
- Validation is based on Vuelidate
- Errors can be customized
export interface FieldInputData extends CommonFieldData {
key: string;
label: string;
type: string;
disabled?: boolean;
}
function useInputField(data: FieldInputData): FormElementItem {
return {
key: data.key,
props: <FieldInputData>() =>
({
key: data.key,
name: data.key,
label: data.label,
type: data.type,
isReadOnly: data.isReadOnly,
isHidden: data.isHidden,
mandatory: data.mandatory,
} as FieldInputData),
component: FormInput as DefineComponent<{}, {}, any>,
validation: data.validation,
};
}
const MyForm = (): FormElement => ({
layouts: [],
elements: [
useInputField({
key: "name",
label: "Nom",
type: "text",
isReadOnly: (data) => data === "test",
validation: () => {
return { required, minLength: minLength(3) };
},
}),
],
});
const myForm: MyFormType = ref({
name: "aaaa",
});
const myFormElement = MyForm();
const errors: FormElementError = {
name: {
required: "Le nom est requis",
},
};<div>
<CreatFormBuilder
id="myForm"
v-model="myForm"
:form-element="myFormElement"
:errors="errors"
/>
</div>| props | type | optional | usage |
|---|---|---|---|
| readOnly | boolean | yes | will make all the form readonly |
| ctaLabel | string | yes | Label for the submit button |
| ctaClass | string | yes | class for the submit button |
| errors | FormElementError | yes | Your custom errors |