Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

KuebelElch15's avatar

use @include for components

Does it makes sence to use @include for components like inputs or buttons?

For example, I am using Material Web Components, and this is how my input field looks like (as a component):

@php
    if(!isset($id)) {
        $id = generateRandomString();
    }
@endphp
<div class="mdc-text-field mdc-text-field--outlined w-100">
    <input type="{{ $type ?: 'text' }}" name="{{ $name }}" id="{{ $id }}" class="mdc-text-field__input" {{ isset($required) ? 'required' : null }}>
    <div class="mdc-notched-outline">
        <div class="mdc-notched-outline__leading"></div>
        <div class="mdc-notched-outline__notch">
            <label for="{{ $id }}" class="mdc-floating-label">{{ $label }}</label>
        </div>
        <div class="mdc-notched-outline__trailing"></div>
    </div>
</div>
@if(isset($helperMessage))
    <div v-if="" class="mdc-text-field-helper-line">
        <p class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent">{{ $helperMessage }}</p>
    </div>
@endif

Now, every time I want to use the input, I use @include to reference it:

@include('textfield', ['name' => 'email', 'type' => 'email', 'label' => 'label', 'helperMessage' => $errors->first('email'), 'required' => '1'])

But does this affect performance, since there can be multiple inputs on one page? I am using the same approach for Vue, but since vue is client side, that doen't effect the initial loading time.

Thanks for your Advide!

0 likes
4 replies
rawilk's avatar

If it's a component, typically you use @component to use it.

@component('textfield')
     @slot('name', 'email')
     @slot('type', 'email')
@endcomponent

Although, in your case you don't have a {{ $slot }} part, so include also makes sense to use. It's just up to you which way you want to write it.

https://laravel.com/docs/5.7/blade#components-and-slots

Also, check out this thread as well: https://stackoverflow.com/questions/44212318/laravel-blade-advantage-of-slot-component-vs-include

2 likes
Cronix's avatar

Yes, loading more files increases the load time. It's pretty trivial though. Benchmark it. Create a loop that is including something many times (like 500). Create the same page with the same markup without the includes (in other words, copy the included file 500 times into a single view so all html is in a single file.) How much longer does it take to load? Then benchmark how long it takes over many times and get an average.

You need to determine what takes too long for your particular scenario. Maybe it's only 5 includes, no big deal. Maybe it's 10,000 includes, which might be a bigger deal. Does it take 10ms longer? 2 seconds longer? You'll only know by benchmarking it. Typically it's just a few ms, but entirely depends on what you're doing (is the included view 10 lines long? 200 lines? How many variables are being parsed? Etc. There isn't a one size fits all answer to your question. It totally depends on the specific situation.

3 likes
KuebelElch15's avatar

@CRONIX - Can you tell me, how do you handle this? Do you write this into some include files or do you just write this markup inline?

I've testet it on my local maschine. If I include the html I've written in my answer 1000 times, it takes ~ 2.3 sec longer than writing the code inline. With 100 times it is still 0.3s slower. So I think I write this just inline, since 2 seconds (or even 0.3s) are a long time.

Please or to participate in this conversation.