Page Builder

Page builder is a neat and easy way for a user to create a page content using pre-defined component

Usage
Just include below snippet to your code:
<page-builder 
    ref="builder" 
    v-model="data.model.builder_content" 
    :components='@json($_model['_data_components'])'
>
</page-builder>
​
Properties
Name
Description
ref
to control visibility, e.g this.$refs.show()
v-model
sync data content
components [array]
components available to be use in page builder
Render Content
@builderRender($content)
Custom Component
Create new class inside core/components directory, class must extend App\Core\Component
<?php
​
namespace App\Core\Components;
​
use App\BlogCategory;
use App\Core\Component;
​
class Blogs extends Component
{
    // Data available for schema/form
    public function getSchemaData()
    {
        return [
            'categories' => BlogCategory::all(),
        ];
    }
​
    // Model that will be save in db and used to populate schema/form
    public function getSchemaModel()
    {
        return [
            'title' => 'Blog posts',
            'subtitle' => 'ets'
        ];
    }
}
Schema
Schema is where your json vfg live, make sure use .blade.php extension for your schema so that we can pass getSchemaData(), 
{
    "groups": [
      {
        "fields": [
          {
            "type": "input",
            "inputType": "text",
            "label": "Title",
            "model": "title"
          },
          {
            "type": "input",
            "inputType": "text",
            "label": "Subtitle",
            "model": "subtitle"
          }
        ]
      }
    ]
  }
Markup
Just a regular blade file that final user will see
<h1>{{ $title }}</h1>
<h2>{{ $subtitle }} </h2>
Overriding
You can override default markup inside your theme
resources/views/themes/{your theme}/components/{component name}
must be placed inside components directory
​
​

Themes

Menus

Last updated 2 months ago

Name	Description
ref	to control visibility, e.g this.$refs.show()
v-model	sync data content
components [array]	components available to be use in page builder