PHPackages                             flyo/nitro-laravel - 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. [Framework](/categories/framework)
4. /
5. flyo/nitro-laravel

ActiveLibrary[Framework](/categories/framework)

flyo/nitro-laravel
==================

Flyo Nitro Laravel Framework Module

2.2(3w ago)13.4k↓11.5%MITPHPPHP ^8.3CI passing

Since Sep 12Pushed 3w ago3 watchersCompare

[ Source](https://github.com/flyocloud/nitro-laravel)[ Packagist](https://packagist.org/packages/flyo/nitro-laravel)[ RSS](/packages/flyo-nitro-laravel/feed)WikiDiscussions main Synced 2w ago

READMEChangelog (10)Dependencies (16)Versions (27)Used By (0)

Flyo Nitro Laravel Framework Module
===================================

[](#flyo-nitro-laravel-framework-module)

```
composer require flyo/nitro-laravel
```

publish the config

```
artisan vendor:publish
```

Adjust the token in `config/flyo.php`

> Ensure to remove the default routes in `routes/web.php` which could conflict with the cms routes.

Views
-----

[](#views)

Add/Adjust the `cms.blade.php` view file in `resources/views`, this is where the cms page loader starts:

```

```

Now all component block views are looked up in `ressources/views/flyo`, for example if you have a Flyo Nitro component block with name Text the view file would be `ressources/views/flyo/Text.blade.php` utilizing the following variables:

> You can adjust the views namespace in the config file using `views_namespace` key.

```

```

To make the block editable you must place the Blade directive `@editable($block)` on the block's root HTML element. This ensures the Flyo editor can correctly detect the block and display the edit icon next to that element when the page is opened in the editor. In short: put `@editable($block)` on the outermost element of the block so clicking the icon opens this block for editing.

```
>

```

`Editable::attr($block)` returns the escaped `data-flyo-uid="..."` attribute, or an empty string when live edit is disabled. `Editable::uid($block)` gives you the raw uid, `Editable::isEnabled()` the live edit state. The marker alone is not enough though: the javascript which makes it interactive is loaded by the `` component, so your layout has to include it.

Live Edit
---------

[](#live-edit)

With `live_edit` enabled in `config/flyo.php`, the `` component loads the [nitro js bridge](https://github.com/flyocloud/nitro-js-bridge) from the CDN and wires everything the Flyo editor needs when the site is displayed inside the editor preview iframe:

- **Page refresh**: the editor can reload the preview after a change.
- **Editor handshake**: the preview announces itself, so the editor can show troubleshooting hints instead of a silent white screen when the preview is blocked or points at a build without live edit.
- **Scroll to block**: selecting a block in the editor scrolls the preview to it.
- **Click to edit**: hovering a block rendered with `@editable($block)` fades in a highlight ring plus a pencil button which opens that block in the editor.

The hover affordance appears after roughly half a second of hovering, so it does not flicker while the mouse crosses the page. It is drawn in a single overlay element outside of your markup: no styles, classes, attributes or listeners are added to your elements and layout and scrolling are untouched. On the live site nothing of it is loaded at all, since `live_edit` is disabled there.

The bridge url is pinned to the major version, so bridge releases are picked up automatically. To self host it or to pin an exact version, set the url in `config/flyo.php`:

```
'live_edit_bridge_url' => env('FLYO_LIVE_EDIT_BRIDGE_URL', 'https://unpkg.com/@flyo/nitro-js-bridge@1.5.0/dist/nitro-js-bridge.umd.cjs'),
```

Layout Variable
---------------

[](#layout-variable)

In order to build menus, the `$config` response from the api is a global available variable, for example this could be used in layout-components:

```
/** @var \Flyo\Model\ConfigResponse $config */