[idea] Multiple components on a page using volt directive

[Luddinus]

I would like to propose a feature enhancement that enables the use of multiple Laravel Volt components on a single page. This will allow developers to create more dynamic and interactive user interfaces by loading different components independently.

Consider a scenario where we have a page that displays the most recent posts and the most popular users. With this enhancement, we can load each component independently based on user interactions.

<button @click="volt('most-recent-posts').$set('loaded', true)">Show most recent posts</button>
<button @click="volt('most-popular-users').$set('loaded', true)">Show most popular users</button>

@volt('most-recent-posts', [
    'loaded' => false,

    'posts' => function () {
        return $this->loaded ? App\Models\Post::mostRecent()->get() : [];
    }
])
    @foreach ($posts() as $post)
        <div>{{ $post->title }}</div>
    @endforeach
@endvolt

@volt('most-popular-users', [
    'loaded' => false,

    'users' => function () {
        return $this->loaded ? App\Models\User::mostPopular()->get() : [];
    }
])
    @foreach ($users() as $user)
        <div>{{ $user->name }}</div>
    @endforeach
@endvolt

What do you think?

[driesvints]

Thanks. If you want to propose anything please send in a PR so we can look at some actual code, thanks.

[Luddinus]

@driesvints I don't want to reopen the thread but what is the second parameter of the volt directive for? It's not in the documentation but looking at the source code it does send, I thought it was for something like this:

@volt('counter', ['count' => 1])
   <div>{{ $count }}</div>
@endvolt

(undefined variable $count)