@modelforms/fontawesome-vuetify is a focused Vue library that modelforms-fontawesome-vuetify is a focused Vue library that brings Font Awesome icons into Vuetify-powered model forms with minimal fuss. It streamlines the process of decorating form fields with meaningful icons so forms feel polished and intuitive. Developers can rapidly prototype UIs by dropping in ready-made wrappers that handle both icon placement and Vuetify styling. Because it's built for the reactive Vue ecosystem, icons update predictably as form state changes. Customization is straightforward: swap icons, tweak sizes, or apply Vuetify themes without touching core logic. Accessibility is considered through aria-friendly patterns and clear visual affordances that help users understand form intent. The library’s lightweight design keeps your bundle lean while delivering a big UX payoff. Concise examples and clear documentation make it easy for new users to get productive in minutes. Whether you’re building an admin dashboard or a public-facing signup flow, it elevates both form clarity and aesthetics. In short, modelforms-fontawesome-vuetify is a practical toolkit for anyone who wants to combine the expressive power of Font Awesome with Vuetify’s polished components to make forms that both look and feel professional.

#First step create component

<template>
    <FormComponent 
        :form="form" 
        @submit="submit($event)"/>

</template>

<script lang="ts">
    import { FormPlate } from '@modelforms/fontawesome-vuetify';

    export default {

        components: {
            FormComponent: FormPlate
        },
        data() {
            return {
                form: testForm
            }
        },
        methods:{
            submit(event){
                console.log(event);
            }
        }
    }
</script>

#Second step create sub model

import { GridModel } from '@modelforms/fontawesome-vuetify';

class UserModel {
    name: string;
    phone: any[] = []
}

export const testForm: GridModel<UserModel> = {
  model: new UserModel(),
  rows: [
  {
    colSize: 12,
    cols: [
      {
        name: "name",
        type: "text",
        rules: {
          rules: [(v) => v?.length <= 3 || "Not longer than 3!"]
        },
        label: "Name",
        size: 12,
      }
    ]
  },
  {
    colSize: 12,
    cols: [
      {
        name: "Description",
        type: "area",
        label: "Description",
        size: 6,
      },
      {
        name: "phone",
        type: "complete",
        label: "Phone",
        size: 12,
        complete: {
            items : [],
            itemValue: [],
            title: "title"
        }
      }
    ]
  }]
}