Vue insert props inside blade template
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.
