Custom form field with own css and js
Hi, I'm trying to create a form component with some custom css and js, is this the best way to go about? Should I create a package for it instead and use it from there?
editor.blade.php
<x-dynamic-component
:component="$getFieldWrapperView()"
:field="$field"
>
<div
class="quill-editor"
x-data="{ state: $wire.entangle('{{ $getStatePath() }}') }"
x-load-js="[
@js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('quill-editor-js'))
]"
x-load-css="[
@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('quill-editor-css'))
]"
>
<!-- Interact with the state property in Alpine.js -->
hello
</div>
</x-dynamic-component>
AppServiceProvider.php
FilamentAsset::register([
Js::make('quill-editor-js', "//cdn.quilljs.com/1.3.6/quill.min.js"),
Css::make('quill-editor-css', "//cdn.quilljs.com/1.3.6/quill.snow.css"),
]);Solution:Jump to solution
Yes. This would be the way to do it. Only thing though, would be to add ->loadedOnRequest() to each asset to use it with x-load.
Unless you need to reuse it in other projects or want to share it with the community I wouldn’t worry about making it a package....
1 Reply
Solution
Yes. This would be the way to do it. Only thing though, would be to add ->loadedOnRequest() to each asset to use it with x-load.
Unless you need to reuse it in other projects or want to share it with the community I wouldn’t worry about making it a package.