PHPackages clevyr/nova-page-builder - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. clevyr/nova-page-builder ActiveLibrary[Utility & Helpers](/categories/utility) clevyr/nova-page-builder ======================== A Clevyr built Nova Page Builder Resource v5.1.1(1y ago)327.4k2[10 PRs](https://github.com/clevyr/nova-page-builder/pulls)MITPHPPHP ^8.3|^8.4CI passing Since Aug 5Pushed 1mo ago9 watchersCompare [ Source](https://github.com/clevyr/nova-page-builder)[ Packagist](https://packagist.org/packages/clevyr/nova-page-builder)[ RSS](/packages/clevyr-nova-page-builder/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (6)Dependencies (13)Versions (49)Used By (0) Clevyr Nova Page Builder ======================== [](#clevyr-nova-page-builder) How to Install ============== [](#how-to-install) Install via Composer ``` composer require clevyr/nova-page-builder ``` Publish migrations, Default page config, PageBuilder Vue components, Nova resource and Model ``` php artisan vendor:publish --tag=clevyr-nova-page-builder php artisan vendor:publish --tag=clevyr-nova-filemanager php artisan vendor:publish --provider="Emilianotisato\NovaTinyMCE\FieldServiceProvider" ``` Migrate the database ``` php artisan migrate ``` ### How to Create Navigation [](#how-to-create-navigation) 1. Create the "Header" navigation in the Nova admin. 2. Add `import MainNav from '@/PageBuilder/partials/MainNav';` to the Vue component AppLayout.vue (`resources/js/Layouts/AppLayout.vue`) 3. Then, add `MainNav` to the `components{}` object 4. Then, add the `` component to the template. This should be inserted next to the "Dashboard" link in the default Jetstream AppLayout component, you can customize and move this as needed. --- What’s Included: ================ [](#whats-included) There will be 3 new sections in Nova now: Menus, File Manager and Pages. ### Config Files [](#config-files) `nova-page-builder.php` - This file lets you set what `model`, `resource`, `views_path` and `locales` is used for the page builder. You can update these as necessary. `nova-menu.php` - This file configures the Menu Builder package. This is where you set the `locales` available for the Page Builder. `nova-tinymce.php` - This file is a custom config for the TinyMCE Rich-Text-Editor. `filemanager.php` - The config file from the Filemanager plugin. ### Pages [](#pages) Pages require templates. Templates have 2 dependencies, a config file with sections available in that template and a Vue file to render the template. The Page Config file and the Page Template parent directory need to be named the same, capitalization and all. ex: `{views_path}/pages/{LayoutName}.php` & `resources/js/Pages/{LayoutName}/Index.vue` ##### Page Config [](#page-config) The config is made up of Nova fields in an array syntax. This uses the Flexible Content package. You can read more docs here: . To see an example, please refer to `{views_path}/pages/Default.php` ##### Page Vue Template [](#page-vue-template) This package currently works off Inertia so you will create your page layouts in `resources/js/Pages/{LayoutName}/Index.vue`. To see an example, please refer to `resources/js/pages/Default/Index.vue` ###### Default Page Template Components [](#default-page-template-components) Out of the box, this package includes the Hero, One Column Layout and Two Column Layout components. These are in the `resources/js/PageBuilder` directory. You can modify these at any time. #### Menu [](#menu) Menu is coming from . The page builder package publishes the config for the menu builder package. You can create custom menu item types and everything else from the docs. ##### Rendering the Menu [](#rendering-the-menu) To render the menu in the Vue app, include the `` component from the `resources/js/PageBuilder/partials/MainNav.vue` file. This will render a menu with an `` for each link. This can also be customized. ### File Manager [](#file-manager) The File Manager is coming from . #### Enabling GCS [](#enabling-gcs) You need the correct .env variables. DevOps can help with this. To add Google Cloug Storage to the filesystem, add the following to the `disks` array in `filesystems.php` config file. ``` 'gcs' => [ 'driver' => 'gcs', 'key_file_path' => env('GOOGLE_CLOUD_KEY_FILE'), // optional: /path/to/service-account.json 'key_file' => [], // optional: Array of data that substitutes the .json file (see below) 'project_id' => env('GOOGLE_CLOUD_PROJECT_ID'), // optional: is included in key file 'bucket' => env('GOOGLE_CLOUD_STORAGE_BUCKET'), 'path_prefix' => env('GOOGLE_CLOUD_STORAGE_PATH_PREFIX', ''), // optional: /default/path/to/apply/in/bucket 'storage_api_uri' => env('GOOGLE_CLOUD_STORAGE_API_URI', null), // see: Public URLs below 'visibility' => 'public', // optional: public|private 'metadata' => ['cacheControl'=> 'public,max-age=86400'], // optional: default metadata ], ``` You can set the following `.env` variables to target `gcs` disk. ``` GOOGLE_CLOUD_KEY_FILE=/app/storage/app/key.json GOOGLE_CLOUD_PROJECT_ID= GOOGLE_CLOUD_STORAGE_VISIBILITY= GOOGLE_CLOUD_STORAGE_BUCKET= GOOGLE_CLOUD_STORAGE_URL= GOOGLE_CLIENT_ID= GOOGLE_CLIENT_SECRET= GOOGLE_CLIENT_REDIRECT=${APP_URL}/oauth/google/callback FILESYSTEM_DISK=gcs FILEMANAGER_DISK=gcs ``` You will need to get the env variables and json key from DevOps. ##### Other packages included: [](#other-packages-included) 1. Nova TinyMCE - 2. Nova Sidebar Icons - 3. Flexible Content - 4. Nova Tabs - --- Locales and Translations ======================== [](#locales-and-translations) You can specify which locales are available in the `nova-menu.php` file. The page builder config inherits from this file. Once you specify which locales are available, those options become available in the CMS for both Pages and Menu Items. To switch locales, pass the locale key (ex: `en`) as the 2nd route parameter to `/locale/{locale}`. This route can be found in the `routes.php` file for this package. --- Creating Page Layouts ===================== [](#creating-page-layouts) ### Config File [](#config-file) To create new page layouts that will be available in the CMS, create a php file in `{views_path}/pages/{LayoutName}.php`. You can view the `Default.php` file to see how it works. The basics of it is an array of Nova fields that are named and will be available in the Vue file. ### Vue File [](#vue-file) This package is set up to use Inertia by default. To add an Inertia page, create a new Directory and Index.vue file in `resources/js/Pages`. You can see the `Default` Page as an example. The config file and Vue directory names need to be identical. ### Accessing Content [](#accessing-content) Page data will be passed to the views automatically, thanks to Inertia. To get specific section data, we have a Vue mixin called `SectionContent` that will return the content for a given section. ``` // About.vue import SectionContent from '@/PageBuilder/mixins/SectionContent'; export default { props: ['page', 'content'], mixins: [SectionContent], } ``` This will get the content for a section with the slug “intro” from the layout’s config file. Meta Information ---------------- [](#meta-information) To inject the meta information into the layout view, add the `` component to the `` of the `AppLayout.vue` file. Next, import and register the Vue component. ``` import Head from '../PageBuilder/partials/Head'; // inside the export object, add Head to the components components: { Head, } ``` --- Tutorial to Create New Page Layout ================================== [](#tutorial-to-create-new-page-layout) We are going to create an “About” page that will just have a hero image and a wysiwyg section for an “introduction”. ### Create the layout's config file [](#create-the-layouts-config-file) Create the file `{views_path}/About.php` with the following content: ```