Eager load a relation for a Vue list

with('author') loads the relation once. Reading it inside a loop is one query per row.

1 min read

For your AI agent

Copies a prompt. Paste it into the AI agent you already have open.

Read https://laravel-vuejs.space/laravel-eager-load-vue.md
with('author') loads the relation once. Reading it inside a loop is one query per row.
Do not call $post->author inside a map() that builds the prop after you forgot with().
Do not eager load every relation on the model "so the page has it".
Show the diff. Do not commit.
On this page · 3 sections
  1. The fix
  2. What to avoid
  3. FAQ

People searching “Laravel N+1 Vue” open a list of posts and the debug bar shows one query per author. Send the relation with the page. The API resource guide is the JSON shape. An Inertia list can pass the columns directly.

TL;DR

  • with(‘author’) loads the relation once.
  • Reading it inside a loop is one query per row.
  • Do not call $post->author inside a map() that builds the prop after you forgot with().
  • Do not eager load every relation on the model “so the page has it”.

Who it's for: Laravel + Vue developers

Applies to: Laravel 13 · Vue 3

The fix#

php
$posts = Post::query()
    ->with('author:id,name')
    ->orderBy('id')
    ->paginate(12);

author:id,name limits the columns. The foreign key has to be in the select or the relation cannot match, so leave id on the user.

vue
<li v-for="post in posts.data" :key="post.id">
  {{ post.title }} <span v-if="post.author">{{ post.author.name }}</span>
</li>

What to avoid#

Gotcha

Do not call $post->author inside a map() that builds the prop after you forgot with(). That is the N+1. Do not eager load every relation on the model “so the page has it”. The HTML includes what you load.

FAQ#

How do I eager load a relation for a Vue list?

with('author') loads the relation once. Reading it inside a loop is one query per row.

What goes wrong with Laravel N+1 Vue?

Many developers open a list of posts and the debug bar shows one query per author. Do not call $post->author inside a map() that builds the prop after you forgot with().

Found this useful?

Ask questions, share what you built.

Join thousands of Laravel and Vue developers in our Facebook group, or get new posts in your Telegram feed. Sharing this article helps too.

Join the Facebook group Follow on Telegram

Keep reading

Newsletter

Get the best of Laravel & Vue, once a month.

One short email with new guides, release notes worth reading and hand-picked community links. No spam, unsubscribe any time.

RSS feed Telegram channel