PHPackages                             novius/laravel-nova-visual-composer - 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. novius/laravel-nova-visual-composer

ActiveLibrary[Utility & Helpers](/categories/utility)

novius/laravel-nova-visual-composer
===================================

A Laravel Nova field to compose blocks.

3.1.0(3y ago)1428.3k↑28.6%9[2 issues](https://github.com/novius/laravel-nova-visual-composer/issues)[2 PRs](https://github.com/novius/laravel-nova-visual-composer/pulls)AGPL-3.0-or-laterVuePHP >=7.4

Since Jan 13Pushed 3y ago4 watchersCompare

[ Source](https://github.com/novius/laravel-nova-visual-composer)[ Packagist](https://packagist.org/packages/novius/laravel-nova-visual-composer)[ RSS](/packages/novius-laravel-nova-visual-composer/feed)WikiDiscussions master Synced today

READMEChangelog (7)Dependencies (3)Versions (12)Used By (0)

Visual Composer for Laravel Nova
================================

[](#visual-composer-for-laravel-nova)

[![Travis](https://camo.githubusercontent.com/99eadfa49cb637766e47d8cead2b4e66feae8e9c56f1c0707a0a8cb4dcc6c5b0/68747470733a2f2f696d672e736869656c64732e696f2f7472617669732f6e6f766975732f6c61726176656c2d6e6f76612d76697375616c2d636f6d706f7365722e7376673f6d61784167653d31383030267374796c653d666c61742d737175617265)](https://travis-ci.org/novius/laravel-nova-visual-composer)[![Packagist Release](https://camo.githubusercontent.com/8e042ec0c482b5e44c05d32759b90a2aca64e31f6df6a4335c932757c3579e96/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6e6f766975732f6c61726176656c2d6e6f76612d76697375616c2d636f6d706f7365722e7376673f6d61784167653d31383030267374796c653d666c61742d737175617265)](https://packagist.org/packages/novius/laravel-nova-visual-composer)[![Licence](https://camo.githubusercontent.com/7412a450d6418fe979c50ec0e24eaa64b38395a20d447a757bcc764e35ddcd32/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6e6f766975732f6c61726176656c2d6e6f76612d76697375616c2d636f6d706f7365722e7376673f6d61784167653d31383030267374796c653d666c61742d737175617265)](https://github.com/novius/laravel-nova-visual-composer#licence)

Requirements
------------

[](#requirements)

- PHP >= 7.4
- Laravel Framework >= 8.
- Nova >= 2.0
- Imagick PHP extension or GD Library (for Intervention Image)

> NOTE: These instructions are for Laravel >= 8. If you are using prior version, please see the [previous version's docs](https://github.com/novius/laravel-nova-visual-composer/tree/2.x).

Installation
------------

[](#installation)

```
composer require novius/laravel-nova-visual-composer
```

Next, configure Intervention Image package :

[Intervention Image configuration instructions](http://image.intervention.io/getting_started/installation#laravel)

### Configuration

[](#configuration)

Some options that you can override are available.

```
php artisan vendor:publish --provider="Novius\NovaVisualComposer\NovaVisualComposerServiceProvider" --tag="config"
```

**JS Configuration**

Some options (like wysiwyg config) are configurable from JS config file.

You can override it with :

```
php artisan vendor:publish --provider="Novius\NovaVisualComposer\NovaVisualComposerServiceProvider" --tag="js"
```

Purge TMP uploaded files
------------------------

[](#purge-tmp-uploaded-files)

In your app/Console/Kernel.php file, you should register a daily job to purge any stale files :

```
protected function schedule(Schedule $schedule)
{
    $schedule->command('nova-visual-composer:purge-tmp-files')
        ->daily();
}
```

By default tmp file is stale considered after 24h. You can override this value in configuration file with `seconds_before_purge_tmp_files` key.

Usage
-----

[](#usage)

**Step 1**

Create a long text column on your model's table.

```
$table->longText('content')->nullable();
```

Configure your model by adding `object` to the desired column.

```
use Illuminate\Database\Eloquent\Model;

class Foo extends Model {
    protected $casts = [
        'content' => 'object',
    ];
}
```

**Step 2**

Add the field to your Nova resource.

```
use App\Nova\Resource;
use Novius\NovaVisualComposer\NovaVisualComposer;

class FooResource extends Resource
{
    public function fields(Request $request)
    {
        return [
            // ..
            NovaVisualComposer::make('Content')
                                ->stacked(),
            // ..
        ];
    }
}
```

**Step 3**

Display in your blade template.

```
@foreach($item->content as $row)
    {!! $row->template::renderFront($row->content) !!}
@endforeach
```

Create new row templates
------------------------

[](#create-new-row-templates)

**Step 1**

You have to publish lang and view files.

```
php artisan vendor:publish --provider="Novius\NovaVisualComposer\NovaVisualComposerServiceProvider" --tag="config"
php artisan vendor:publish --provider="Novius\NovaVisualComposer\NovaVisualComposerServiceProvider" --tag="views"
```

**Step 2**

Create your own Row Template and link it into configuration file.

*Row Template Class*

```
namespace App\Nova\Templates\Rows;

use Novius\NovaVisualComposer\Templates\RowTemplateAbstract;
use Novius\NovaVisualComposer\Traits\HasImageField;
use Novius\NovaVisualComposer\Traits\HasPrunableFiles;

class ImageText extends RowTemplateAbstract
{
    use HasImageField;
    use HasPrunableFiles;

    public static $name = 'image-text';

    protected static function imageFieldsIndexes(): array
    {
        return [0]; // Because image field is the first field that contains "js-visual-field" class of CRUD view
    }
}
```

*Add it to configuration file*

```
return [

    ...

    'templates' => [
        \Novius\NovaVisualComposer\Templates\Article::class,
        \Novius\NovaVisualComposer\Templates\ImageMultiple::class,
        \Novius\NovaVisualComposer\Templates\ImageSimple::class,
        \Novius\NovaVisualComposer\Templates\Separator::class,
        \Novius\NovaVisualComposer\Templates\Title::class,

        // Custom Template
        \App\Nova\Templates\Rows\ImageText::class,
    ],
];
```

**Step 3**

Create template views (CRUD + front views).

`resources/views/vendor/nova-visual-composer/templates/ImageText/crud.blade.php`

> TIPS :

- Each HTML field that you want to save must contains `js-visual-field` class.
- If you want a wysiwyg add `js-wysiwyg` class to textarea field.
- If you want an image upload field add `js-image-uploader` class to file field.
- If you want a multiple images upload field add `js-image-uploader` class + `multiple` attribute to file field.

```

            {{ $templateDetails['name_trans'] }}

                        {{ trans('nova-visual-composer::templates.'.$templateName.'.crud_pre_title') }}

                        {{ trans('nova-visual-composer::templates.'.$templateName.'.crud_title') }}

                        {{ trans('nova-visual-composer::templates.'.$templateName.'.crud_text') }}

```

`resources/views/vendor/nova-visual-composer/templates/ImageText/front.blade.php`

```
@php
    if (empty($content) || !is_array($content)) {
            return;
    }

    list(
        $images,
        $preTitle,
        $title,
        $htmlContent,
    ) = $content;

    $image = is_array($images) ? array_shift($images) : null;
@endphp

    @if (!empty($image))

    @endif
    @if (!empty($preTitle))

            {{ $preTitle }}

    @endif
    @if (!empty($title))

            {{ $title }}

    @endif
    @if (!empty($htmlContent))

            {!! $htmlContent !!}

    @endif

```

**Step 4**

Add your translations to language files.

`resources/lang/vendor/nova-visual-composer/fr/templates.php`

```
return [
    ...

    'image-text' => [
        'name' => 'Image / texte',
        'crud_pre_title' => 'Sur-titre',
        'crud_title' => 'Titre',
        'crud_text' => 'Texte',
    ],
];
```

Lint
----

[](#lint)

Run php-cs with:

```
composer run-script lint
```

Contributing
------------

[](#contributing)

Contributions are welcome! Leave an issue on Github, or create a Pull Request.

Licence
-------

[](#licence)

This package is under [GNU Affero General Public License v3](http://www.gnu.org/licenses/agpl-3.0.html) or (at your option) any later version.

###  Health Score

37

—

LowBetter than 81% of packages

Maintenance17

Infrequent updates — may be unmaintained

Popularity37

Limited adoption so far

Community18

Small or concentrated contributor base

Maturity64

Established project with proven stability

 Bus Factor1

Top contributor holds 50% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~115 days

Recently: every ~206 days

Total

9

Last Release

1442d ago

Major Versions

0.0.1 → 1.0.02020-01-20

1.x-dev → 2.0.02021-02-19

2.x-dev → 3.0.02021-09-03

PHP version history (2 changes)0.0.1PHP >=7.1.3

3.0.0PHP >=7.4

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/341860?v=4)[Novius](/maintainers/novius)[@novius](https://github.com/novius)

---

Top Contributors

[![tony-novius](https://avatars.githubusercontent.com/u/243603340?v=4)](https://github.com/tony-novius "tony-novius (10 commits)")[![tonyyb](https://avatars.githubusercontent.com/u/11064382?v=4)](https://github.com/tonyyb "tonyyb (6 commits)")[![smeeckaert](https://avatars.githubusercontent.com/u/781097?v=4)](https://github.com/smeeckaert "smeeckaert (2 commits)")[![felixgilles](https://avatars.githubusercontent.com/u/900854?v=4)](https://github.com/felixgilles "felixgilles (1 commits)")[![Findhel](https://avatars.githubusercontent.com/u/9133325?v=4)](https://github.com/Findhel "Findhel (1 commits)")

---

Tags

laravellaravel-novanovapage-builderlaravelnova

###  Code Quality

Code StylePHP CS Fixer

### Embed Badge

![Health badge](/badges/novius-laravel-nova-visual-composer/health.svg)

```
[![Health](https://phpackages.com/badges/novius-laravel-nova-visual-composer/health.svg)](https://phpackages.com/packages/novius-laravel-nova-visual-composer)
```

###  Alternatives

[laravolt/avatar

Turn name, email, and any other string into initial-based avatar or gravatar.

2.0k5.8M38](/packages/laravolt-avatar)[psalm/plugin-laravel

Psalm plugin for Laravel

3355.3M346](/packages/psalm-plugin-laravel)[renatomarinho/laravel-page-speed

Laravel Page Speed

2.5k1.7M11](/packages/renatomarinho-laravel-page-speed)[intervention/image-laravel

Laravel Integration of Intervention Image

1588.9M182](/packages/intervention-image-laravel)[vinkius-labs/laravel-page-speed

Laravel Page Speed

2.5k12.5k1](/packages/vinkius-labs-laravel-page-speed)[hasinhayder/tyro-dashboard

Tyro Dashboard - Beautiful admin dashboard for managing Tyro roles, privileges, users, and settings

5443.8k](/packages/hasinhayder-tyro-dashboard)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)