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

Rendering Komposers
Display in Blade, use in Vue or call directly from Route.

Rendering options

There are 3 ways to render Komposers. The 3 methods supplement each other and you may well need to use them together in your app.

  1. A Direct Route call may render the komposer:
      - inside a Kompo layout
      - or return a JSON object.
  2. Simply render in your Blade template.
  3. Use inside a Vue component for complex features.

Route render

Render in layout

If you have defined a Kompo layout template, you may render komposers directly in the layout directly with `Route::get`.

The routes inside the `layout` group will display the form in the section `content` of the template along with any navbar or sidebars it may contain.

Changing the section name

Our layout already contains the desired navigation menus (navbars, sidebars,...) and has a default section `content` for displaying komposers.

If however, you have another template and you wish to use another section name, you may chain the `section()` method to the kompo Route:

Render as JSON

When the route is NOT wrapped in any layout, it will return the Komposer as a JSON object. This is useful when doing AJAX requests and you wish to load the Komposer in Panels and/or Modals.

Then, in another Komposer, we may call this route and display it in a Modal for example:

Button::form('Open Answer Form')
   ->get('answer', ['id' => 123])->inModal()

Blade render

The `render` method will directly generate the vue component for you. The first part is nothing more than syntactic sugar for the second one.

<!-- In your blade template -->
{!! App\Http\Komposers\MyForm::render() !!}
{!! App\Http\Komposers\MyTable::render() !!}

<!-- or -->

<!-- Same thing as this -->
<vl-form :vkompo="{{ new App\Http\Komposers\MyForm() }}"></vl-form>
<vl-query :vkompo="{{ new App\Http\Komposers\MyTable() }}"></vl-query>
Remember to place `<vl-form>` and `<vl-query>` inside the bootable Vue.js element, which is usually the div with id `#app`.

Usage in Vue

The front-end components `vl-form` and `vl-query` have one required prop `:vkompo` prop where you inject the instantiated PHP class. Kompo encodes it automatically to JSON.

<vl-form :vkompo="{{ new App\Http\Komposers\MyForm() }}"></vl-form>
<vl-query :vkompo="{{ new App\Http\Komposers\MyTable() }}"></vl-query>

Check out the Vue usage section for more detailed info.