Nova Quick View Laravel Package

Getting Started

php-junior/nova-quick-view adds a read-only "peek" modal to a Nova resource index: instead of navigating to the detail page, the user clicks a row action and sees a curated subset of fields in a modal. It is a Nova field package, not a tool or card — which means it lives inside fields() and follows field visibility rules (onlyOnIndex(), canSee(), etc.).

Requirements: Laravel Nova 3.x and PHP 7.2+. Treat this as a Nova 3-only artifact — it has had no release since December 2020 and will not work against Nova 4/5's Vue 3 front end.

Install:

composer require php-junior/nova-quick-view
php artisan vendor:publish --provider="PhpJunior\NovaQuickView\FieldServiceProvider"

The service provider registers the compiled JS/CSS via Nova::script() / Nova::style(), so the publish step must put assets in public/vendor/... before the component renders. If the button appears but the modal is blank, the asset publish is the first thing to check.

Where to look first:

1. vendor/php-junior/nova-quick-view/README.md — short, but it is the only spec.
2. vendor/php-junior/nova-quick-view/src/QuickView.php — the whole public API is this one class (constructor args, fields(), resource()). It is ~100 lines; read it rather than guessing.
3. vendor/php-junior/nova-quick-view/resources/js/components/IndexField.vue — tells you exactly what the modal renders and what props it expects.

First use case: a support team working the Order index. Add a quick view showing customer, status, total, and the last three line items, so agents can triage without loading the full detail page (and its heavy fields() method) for every row.

Implementation Patterns

Basic registration. Add the field to the resource and constrain it to the index, otherwise it renders an empty column on create/update forms:

use PhpJunior\NovaQuickView\QuickView;

public function fields(Request $request)
{
    return [
        ID::make()->sortable(),
        Text::make('Reference')->sortable(),
        QuickView::make('Quick View')
            ->fields(fn () => $this->quickViewFields())
            ->onlyOnIndex(),
    ];
}

Confirm the exact method names against src/QuickView.php in your installed version — the package is small enough that the source is the documentation, and the README has drifted from the code in places.

Share field definitions instead of duplicating them. The main maintenance trap is defining the same columns twice (once for the detail page, once for the modal) and letting them drift. Extract a private method or a small Fields value object and call it from both places:

protected function quickViewFields(): array
{
    return [
        Text::make('Customer', fn () => $this->customer->name),
        Badge::make('Status'),
        Currency::make('Total')->currency('USD'),
        Text::make('Items', fn () => $this->items->count()),
    ];
}

Authorization. Wrap the field in canSee() so the modal respects the same policy as the detail page — Nova field visibility is not automatically tied to view policies:

QuickView::make('Quick View')
    ->canSee(fn () => Gate::allows('view', $this->resource))

Multiple views per resource. Where the package supports it, register two fields — e.g. "Quick View" (summary) and "Quick View — Billing" — with different field sets. Keep each modal under ~10 fields; a modal that scrolls is worse than a page load.

Keep the modal data honest. Anything you show in the modal must be eager-loaded on the index query, or you get one query per row per relation. Use Nova::indexQuery() or a resource-level indexQuery() override to add with('customer', 'items') for the fields your modal reads.

Gotchas and Tips

• Unmaintained and Nova-3-locked. Last release 2020-12-09, zero dependents. If you are on Nova 4+, do not install — fork it, port IndexField.vue to Vue 3 with nova.mix, and register your own component name. Budget a day; the component is small.
• Publish assets after every composer update. The package ships compiled dist/ files; a fresh deploy that skips the publish step yields a button that does nothing and a 404 in the network tab. Add it to your deploy script, and prefer committing the published public/vendor output over running the publish in production.
• Index-only by default. Forgetting onlyOnIndex() produces an inert empty column on the detail and create screens. If the field seems to "disappear," check onlyOnIndex() / exceptOnForms() before assuming a rendering bug.
• Modal fields are display-only. sortable(), searchable(), and inline rules() are meaningless inside the modal — they apply to the index table, not the preview. Don't debug missing sort arrows here.
• N+1 queries are the classic symptom. An index that took 80ms starts taking 600ms once the quick view is added, because relation lookups run per row. Confirm with DB::listen() or Telescope before blaming the package; the fix is in indexQuery(), not the field.
• Debugging a blank modal: open the browser console first (Vue prop/type errors surface there), then verify public/vendor/... exists, then php artisan view:clear and nova:clear-cache if the asset manifest is stale. A hard refresh is genuinely required — Nova caches the compiled field JS aggressively.
• Extension point is the Vue component. Since the package is dead, plan for the maintenance path: publish it into nova-components/quick-view as a local field (or path repository in composer.json) and treat the upstream as a starting point. That way the next Nova upgrade is your diff, not a blocker.
• Small blast radius is a feature. With a ~0.08 health score, keep the dependency at the edges of your app: register it in a handful of high-traffic resources where triage speed matters, never in resources you consider load-bearing, and write one Nova Dusk/feature test asserting the field is present so an upgrade failure is caught in CI rather than by the support team.