Custom Cards
Extend query cards and visuals...

Vue component

For even more power and flexibility, you may also create your own Vue card component.

Let's take a look at a custom card example. The vue component name need to start with 'Vl', so let's call ours `VlSection.vue`.

<template>
    <h3 :id="`$_prop`('slug')" v-html="`$_prop`('title')"/>
    <p v-html="`$_prop`('description')" />

    <div v-for="preview in `$_prop`('previews')">
        <vl-form v-if="preview.enabled" :vkompo="preview" />
    </div>
</template>

<script>
import Card from 'vue-kompo/js/query/mixins/Card'
export default {
   mixins: [Card], //Required - Import the Card mixin 

   //Then go wild... do whatever you want
   methods:{
      
   },
   computed:{

   }
}
</script>
The mixin offers some helpful methods such as the `$_prop` method that lets you retrieve the data passed from the back-end. But it also has essential props and data that are required.

Once the Vue component is created, we reference it in our PHP with the `Kompo\Card` class and assign it the front-end component we built with the `component` method:

use Kompo\Query;
use Kompo\Card; //This is the general Card komponent

class CustomCatalog extends Query
{
    public function card(Post $post)
    {
       return Card::form([
          //... 
       ])->component('Section'); //notice how we tell which Front-end component to use
    }

Then we may feed it the relevant information from the back-end. This works exactly as you would with predefined components.

public function card(Post $post)
{
   return Card::form([
      'title' => $post->title,
      'slug' => Str::slug($post->title),
      'description' => $post->description,
      'previews' => $post->codes->map(function($code){
          return $code->preview();
      })
   ])->component('Section');
}