Just add component at config/cms.php
<?php​namespace App\Core\Components;​use App\Models\Post;use App\Core\Component;​class Media extends Component{// data providerpublic function getData(){return ['posts' => Post::type('media')->get(),];}​// will use to populate schemapublic function getModel(){return ['media_id' => null,];}​// you can do something to model before pass to viewpublic function filterRenderData($model){$url = null;​if (isset($model['media_id']) && ($media = Post::find($model['media_id']))) {$url = $media->getFirstMedia()->getFullUrl();}​return ['media' => $url];}​public function getSchema(){// "# #" to render without string quotereturn [["type" => "multiselect","model" => "media_id","label" => "Media","placeholder" => "Select media","selectOptions" => ["multiple" => false,"key" => "name","searchable" => true,"closeOnSelect" => true,"customLabel" => "#this.vueMultiselectCustomLabelByCollections(this.componentEditorData.posts, 'title')#","allowEmpty" => false],"values" => "#this.vueMultiselectValuesByCollections(this.componentEditorData.posts)#"]];}}
Finally add markup in resources\views\builder\components\media.blade.php. Can contain vue component that you create resources\js.
// at service providerpublic function boot(){$this->addBuilderComponent(\Your\Component\Carousel::class);// for more flexibilityEventy::addFilter('cms:builder-components', function ($components) {return array_merge($components, [\Your\Component\Carousel::class]);});}
​
​