Nova Grid Laravel Package

Getting Started

Install the package via Composer:

composer require jobcerto/nova-grid

The package is a Laravel Nova extension, so the first thing to confirm is that you are on a Nova version the package supports (check composer.json for the laravel/nova constraint — Nova's major versions are not backward compatible). If the package ships config or compiled assets, publish them:

php artisan vendor:publish --provider="Jobcerto\NovaGrid\NovaGridServiceProvider"

Then look in two places first:

1. vendor/jobcerto/nova-grid/src/ — the field/tool/resource class and any service provider, to see exactly what is registered and which Nova extension point it hooks into.
2. vendor/jobcerto/nova-grid/resources/ (or dist/) — the Vue components. This tells you whether the package renders its own index view, wraps the existing table, or is a standalone field.

The first real use case is almost always replacing a Nova resource's default index table with a card-style grid for resources that are more "visual" than tabular — media, products, projects, listings, anything with a thumbnail or where scanning by cards beats scanning by rows. Typical wiring:

// app/Nova/Product.php
public function fields(Request $request)
{
    return [
        // ...
    ];
}

public function cards(Request $request)
{
    return [new \Jobcerto\NovaGrid\Grid()];
}

or, if it is a field rather than a card, attach it to the resource like any other Nova field. Confirm which by reading the class name and constructor. Do not assume — Nova packages in this space are inconsistent about whether "grid" means a field, a card, or a full index replacement, and the integration path is different for each.

Implementation Patterns

As a field on the resource. The most common pattern is a Grid field that receives a list of child fields and renders them as cards. Treat it like Stack/Panel in that it groups fields, but expect the payload to render as a visual grid on detail and/or index views. Use it when you have a fixed set of attributes per item:

Grid::make('Details', [
    Text::make('Name'),
    Image::make('Thumbnail'),
    Badge::make('Status'),
])

As a card on the dashboard. If the package exposes a Grid card, mount it in a resource's cards() or a dashboard so the index view or dashboard becomes a grid of resource summaries. This is the pattern to reach for when the grid is a navigation surface rather than a per-record detail view.

Defining items from a collection. Grid packages usually let you supply the items to render (a static array, a model query, or an API-backed collection). The pattern to standardize on is building the item list in a Nova resolve / indexQuery-style hook so eager loading and authorization live in PHP, not in the Vue component:

public function indexQuery(NovaRequest $request, $query)
{
    return $query->with(['media', 'category'])->where('active', true);
}

Pairing with actions and filters. Keep using Nova's native actions, filters, and search on top of the grid where supported. If the grid replaces the table, verify that actions(), filters(), and searchableColumns() still work — test each explicitly rather than assuming Nova's index plumbing survived the override.

Custom card content. Most packages of this shape let you point at a custom Vue component. Keep custom components thin: pass resolved data in from PHP, render it in Vue, and avoid querying from the client. If you need per-card badges, statuses, or conditional styling, compute them server-side and expose them as props.

Integration with existing tooling. Use the grid alongside, not instead of, Nova metrics and lenses. A grid is a view layer; if you need aggregation, keep Nova's metric cards on the dashboard and let the grid handle the browsing experience.

Gotchas and Tips

• Nova version lock-in. Nova is not semver-friendly across majors. Pin the package and test upgrades on staging before deploying. If composer require pulls a conflicting laravel/nova constraint, you are on the wrong Nova major and the package will not load.
• Eager loading is on you. Grid views tend to render more associations per item than a table (thumbnails, relations, computed labels). An N+1 here is very visible — every card triggers a query. Audit with Telescope or DB::listen before shipping.
• Index vs. detail ambiguity. Confirm whether the package modifies the index view, the detail view, or both; the Grid class name does not tell you. Read the provider's boot/register and the Vue entry point before you plan around it.
• Assets not compiling. If changes to the package's Vue source have no effect, you are looking at the compiled dist/ bundle. Run the package's build, or (if it exposes one) publish and override the component. Nova also caches its own compiled assets — run php artisan nova:publish and hard-refresh the browser when things look stale.
• Pagination and counts. Grids that override the index view often lose Nova's pagination controls or the "Showing X of Y" counter. Test with a paginated resource (more than 25 rows) rather than a handful of fixtures.
• Authorization. Per-item authorization (authorizedToView) can be bypassed if the grid builds its collection outside Nova's query. Keep the collection sourced from the resource's query so policies still apply.
• CSS collisions. Nova's Tailwind utilities are global; card components that bring their own CSS or Tailwind config can leak styles into the rest of the panel. Scope custom styles or prefix classes.
• Extension points. The reliable extension points in packages like this are usually (a) a custom Vue component prop, (b) a resolveUsing callback, and (c) the resource's indexQuery. Look for these before forking the package — forking a low-star Nova package is a maintenance liability, and the vendor path will be overwritten on every composer update.
• Sparse ecosystem signal. The repository has essentially no stars or dependents, which means no community-tested edge cases and no guarantee of maintenance. Treat it as internal code: vendor-pin the exact version, add a smoke test that renders the grid in CI (a simple Nova route test hitting the index), and be prepared to replace it with a hand-rolled Nova card if upkeep stalls.