Adding content header to the components itself

Modules/Page/Assets/js/components/PageForm.vue

 <template>
+    <div class="div">
+        <div class="content-header">
+            <h1>
+                {{ translate('page', pageTitle) }}
+            </h1>
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <a href="/backend">Home</a>
+                </el-breadcrumb-item>
+                <el-breadcrumb-item :to="{name: 'admin.page.page.index'}">{{ translate('page', 'pages') }}
+                </el-breadcrumb-item>
+                <el-breadcrumb-item :to="{name: 'admin.page.page.create'}">{{ translate('page', pageTitle) }}
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+
         <el-form ref="form" :model="page" label-width="120px" label-position="top"
                  v-loading.body="loading"
                  @keydown="form.errors.clear($event.target.name);">
@@ -21,6 +37,7 @@
 
                                     <el-form-item :label="translate('page', 'slug')"
                                                   :class="{'el-form-item is-error': form.errors.has(locale + '.slug') }">
+                                        <el-button>Generate</el-button>
                                         <el-input v-model="page[locale].slug"></el-input>
                                         <div class="el-form-item__error" v-if="form.errors.has(locale + '.slug')"
                                              v-text="form.errors.first(locale + '.slug')"></div>
@@ -95,7 +112,8 @@
                                         <el-button type="primary" @click="onSubmit()" :loading="loading">
                                             {{ translate('core', 'save') }}
                                         </el-button>
-                                    <el-button @click="onCancel()">{{ translate('core', 'button.cancel') }}</el-button>
+                                        <el-button @click="onCancel()">{{ translate('core', 'button.cancel') }}
+                                        </el-button>
                                     </el-form-item>
 
                                 </el-tab-pane>
@@ -125,6 +143,7 @@
                 </div>
             </div>
         </el-form>
+    </div>
 </template>
 
 <script>
@@ -137,6 +156,7 @@
         mixins: [Translate, Slugify],
         props: {
             locales: {default: null},
+            pageTitle: {default: null, String},
         },
         data() {
             return {

Modules/Page/Assets/js/components/PageTableServerSide.vue

 <template>
+    <div class="div">
+        <div class="content-header">
+            <h1>
+                {{ translate('page', 'pages') }}
+            </h1>
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <a href="/backend">Home</a>
+                </el-breadcrumb-item>
+                <el-breadcrumb-item :to="{name: 'admin.page.page.index'}">{{ translate('page', 'pages') }}</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+
         <div class="row">
             <div class="col-xs-12">
                 <div class="box box-primary">
@@ -7,7 +20,9 @@
                             <div class="tool-bar el-row" style="padding-bottom: 20px;">
                                 <div class="actions el-col el-col-5">
                                     <router-link :to="{name: 'admin.page.page.create'}">
-                                    <el-button type="primary"><i class="el-icon-edit"></i> {{ translate('page', 'create page') }}</el-button>
+                                        <el-button type="primary"><i class="el-icon-edit"></i>
+                                            {{ translate('page', 'create page') }}
+                                        </el-button>
                                     </router-link>
                                 </div>
                                 <div class="search el-col el-col-5">
@@ -56,6 +71,7 @@
                 </div>
             </div>
         </div>
+    </div>
 </template>
 
 <script>

Modules/Page/Resources/views/admin/create.blade.php

 @extends('layouts.master')
 
 @section('content-header')
-    <h1>
-        {{ trans('page::pages.create page') }}
-    </h1>
-    <ol class="breadcrumb">
-        <li><a href="{{ route('dashboard.index') }}"><i class="fa fa-dashboard"></i> {{ trans('core::core.breadcrumb.home') }}</a></li>
-        <li><a href="{{ route('admin.page.page.index') }}">{{ trans('page::pages.pages') }}</a></li>
-        <li class="active">{{ trans('page::pages.create page') }}</li>
-    </ol>
 @stop
 
 @push('css-stack')

Modules/Page/Resources/views/admin/edit.blade.php

 @extends('layouts.master')
 
 @section('content-header')
-    <h1>
-        {{ trans('page::pages.edit page') }}
-    </h1>
-    <ol class="breadcrumb">
-        <li><a href="{{ route('dashboard.index') }}"><i class="fa fa-dashboard"></i> {{ trans('core::core.breadcrumb.home') }}</a></li>
-        <li><a href="{{ route('admin.page.page.index') }}">{{ trans('page::pages.pages') }}</a></li>
-        <li class="active">{{ trans('page::pages.edit page') }}</li>
-    </ol>
 @stop
 
 @push('css-stack')

Modules/Page/Resources/views/admin/index.blade.php

 @extends('layouts.master')
 
 @section('content-header')
-    <h1>
-        {{ trans('page::pages.pages') }}
-    </h1>
-    <ol class="breadcrumb">
-        <li><a href="{{ route('dashboard.index') }}"><i class="fa fa-dashboard"></i> {{ trans('core::core.breadcrumb.home') }}</a></li>
-        <li class="active">{{ trans('page::pages.pages') }}</li>
-    </ol>
 @stop
 
 @section('content')