Installation About
Komponents CSS Styles
Introduction Commands 1  Forms 2  Queries 3  Menus Layouts Route render Blade Render
Authorization Validation
Testing / TDD
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`.

    <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" />

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

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();