Vue insert props inside blade template

Question

I have a Vue3 application installed on blade/laravel. In a blade template I have a Vue3 component (zest-dropzone) in which I inserted a slot:

<template>
...

<slot name="hits" :button-label="buttonLabel" :files="files" :type="type" :state="state"></slot>
</template>

<script>
...
</script>

Inside the blade template I have the following:

<zest-dropzone
    accepted-files=".psd,application/pdf,audio/*,image/*,video/*"
    button-label="{{ Lang::get('admin/button.edit') }}"
    categories="{{ json_encode($categories) }}"
    type="files">
    <template #hits="hitsProps">
      @{{ hitsProps.type }}
      <zest-dropzone-files-preview :hitsProps="hitsProps" :button-label="buttonLabel" :files="files" :type="type" :state="state"></zest-dropzone-files-preview>
    </template>
</zest-dropzone>

ZestDropzoneFilesPreview is another component that is registered globally and is technically rendered on the page, but no matter what I try, the props never appear.

In the blade template, @{{ attemptsProps.type }} renders correctly and the value type is present on the hitProps, but when I try to pass it to the next component, it doesn't pass and I'm in the ZestDropzoneFilesPreview Undefined.

Does anyone know how to deal with this problem? Thanks.

Answer 1

Fixed the issue where props were not passed accordingly (hitsProps -> attempts-props).