Connecting Laravel listing data to Vue through Inertia.

THE WORK

The project.

The Inertia Listing Study explores a small read path without a separate REST client. Laravel selects listing records and passes them as page props, while a Vue component loops over them to display each city. The pieces are present in source, but they don't yet form a working page flow: the resolver doesn't select the imported component, the detail view is empty and write actions remain stubs.

IMPLEMENTATION

Design choices.

1. Inertia props let the Laravel controller supply the page's data directly, avoiding a separate task of fetching the same list through a REST module. The page's expected data shape is correspondingly tied to that controller.
2. The index currently loads the full listing collection. Pagination and filtering aren't part of this small implementation yet.

HOW IT FITS TOGETHER

Architecture.

• The listing index calls Listing::all() and returns the collection in an Inertia response. The initial Vue component accepts a listings prop and renders city values from it.
• The detail action receives a route-bound Listing and passes it to its page. That supplies a server-side data path, but the corresponding Vue template is still empty.
• The resolver imports a page map but creates an array containing the requested path instead of selecting a component from that map. Resolving the page correctly is required before these controller and view pieces can work together.

CHECKS & RESULTS

What was checked.

A source review shows what the code does. It is not a fresh test of the running app.

1. Code and development records reviewedReviewed11 September 2026

   The code, tests and available development records were checked. Reported test results keep their original scope. No fresh app or live deployment check was run for this write-up.

   Scope of this check

   Code review, not a fresh run of the app