[Bug]: Custom Field Component Not Rendering - Shows as Plain Div

[swarakaka]

Description

Description
Custom field components are not rendering properly. Instead of the Vue component being mounted, the field renders as a plain

with all props as HTML attributes.

This issue is at line 582. Here when it checks for the component it does not find it in the list (componentMap).

Steps to Reproduce

1. Create custom field PHP class:

<?php

namespace App\Forms\Components;

use Laravilt\Forms\Components\Field;

class TranslatableField extends Field
{
    protected string $view = 'forms.components.translatable-field';

    public function getValue(): mixed
    {
        $value = parent::getValue();

        if (is_string($value)) {
            $decoded = json_decode($value, true);
            return $decoded ?? $value;
        }

        return $value;
    }
}

2. Create Blade view at resources/views/forms/components/translatable-field.blade.php:

@props(['component'])

@php
    $props = $component->toLaraviltProps();
@endphp

<x-laravilt-vue-component
    component="TranslatableField"
    :props="$props"
/>

3. Create Vue component at resources/js/components/forms/TranslatableField.vue:

<script setup lang="ts">
import { Input } from '@/components/ui/input';

defineProps<{
    modelValue?: string;
    label?: string;
    errors?: string[];
    helperText?: string;
    required?: boolean;
    disabled?: boolean;
}>();

defineEmits<{
    (e: 'update:modelValue', value: string): void;
}>();
</script>

<template>
    <laravilt-field-wrapper
        :label="label"
        :errors="errors"
        :helper-text="helperText"
        :required="required"
    >
        <Input
            type="text"
            :value="modelValue"
            @input="$emit('update:modelValue', $event.target.value)"
            :disabled="disabled"
        />
    </laravilt-field-wrapper>
</template>

4. Register component in resources/js/composables/useFormComponents.ts:

import TranslatableField from '@/components/customizes/TranslatableField.vue'

export const formComponents = {
    'translatable-field': TranslatableField,
}

5. Use the field:

TranslatableField::make('name')
    ->label('Name')
    ->required()

Expected Behavior

The Vue component should render with the field wrapper and input.

Actual Behavior

The field renders as a plain

with all props as HTML attributes:

Package Version

1.0

PHP Version

8.4

Laravel Version

12.50.0