Installation About
KOMPONENTS
Komponents CSS Styles
KOMPOSERS
Introduction Commands 1  Forms 2  Queries 3  Menus Layouts Route render Blade Render
SECURITY
Authorization Validation
TESTING
Testing / TDD
ADVANCED
Usage in Vue Custom Komponents Custom Cards   Improve this page

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');
}