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