# Eager load a relation for a Vue list

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

- URL: https://laravel-vuejs.space/laravel-eager-load-vue
- Author: Anass Ez-zouaine (https://laravel-vuejs.space/author/anass-ez-zouaine)
- Published: 2026-10-11
- Topics: Laravel, VueJs

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](https://laravel-vuejs.space/laravel-api-resources-vue) 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

**Q: 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.

**Q: 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()`.