Creating your own form type components

Rendering a form can be done with a single line of code:

<sv-form :form="{{ form | vue('form') }}"></sv-form>

The input-types are determined automatically for using the appropriate vuetify components.

If you want you can also use your own vue-components. This requires a couple of things:

1. Your vue-component must be globally available.
2. In your serverside form-builder you provide the name of your vue-component in the block_prefix.

And that's basically it! Of course your vue-component should implement a few things for handling the data, but that can be done fairly easy by using the FormWidgetMixin.

A text-field that uses a plain html-input instead of vuetify could be implemented like this:

<template>
    <input type="text" v-model="form.vars.data" v-bind="Object.assign(attributes, $attrs)" />
</template>

<script lang="ts">
    import {Component, Mixins} from 'vue-property-decorator';
    import FormWidgetMixin from "./FormWidgetMixin.ts";
    @Component
    export default class SimpleTextField extends Mixins(FormWidgetMixin) {
    }
</script>

Then in your serverside form-builder you need something like this:

   $builder->add('text', TextType::class, [
        'block_prefix' => 'SimpleTextField',
   ]);

Would you like a more complex example? In the demo-branch, the https://github.com/k3ssen/SymfonyVuetified/blob/demo/assets/components/SvTextEditor.vue uses this very same approach to create a wysiwyg-text-editor