title: Why laravel components is not rendered inblade file?
body: <p>in my Laravel 8 /  tailwindcss 2 / Alpinejs 2.8 app
  I create laravel component with a command</p>
  <pre><code>php artisan make:component  Admin/ListingHeader
  </code></pre>
  <p>but calling this component in one of my blade files, like</p>
  <pre><code>&lt;div class=&quot;editor_listing_wrapper&quot; x-data=&quot;adminCategoryListingComponent()&quot;&gt;
      111111&lt;x-admin.listing-header
      :icon-hint=&quot;'Categories of the app'&quot;
      :items-length= &quot;{{ count($categories) }}&quot;
      :items-total-count= &quot;{{ $totalCategoriesCount }}&quot;
      /&gt;99999999
  </code></pre>
  <p>This component is not rendered, as I see in the browser: <a href="https://prnt.sc/zulwm0" rel="nofollow noreferrer">https://prnt.sc/zulwm0</a></p>
  <p>I suppose I set a valid path in</p>
  <pre><code>&lt;x-admin.listing-header
  </code></pre>
  <p>as the generated template is located as resources/views/components/admin/listing-header.blade.php</p>
  <p>I prefer to create laravel components, but why it is not rendered? How to fix it?</p>
  <p><strong>MODIFIED BLOCK:</strong></p>
  <pre><code>app/View/Components/Admin/ListingHeader.php:
  &lt;?php
  
  namespace App\View\Components\Admin;
  
  use Illuminate\View\Component;
  
  class ListingHeader extends Component
  {
      public $iconHint= '';
      public $itemsLength= 0;
      public $itemsTotalCount= 0;
      /**
       * Create a new component instance.
       *
       * @return void
       */
      public function __construct(string $iconHint, int $itemsLength, int $itemsTotalCount)
      {
          $this-&gt;iconHint= $iconHint;
          $this-&gt;itemsLength= $itemsLength;
          $this-&gt;itemsTotalCount= $itemsTotalCount;
      }
  
      public function render()
      {
          return view('components.admin.listing-header');
      }
  }
  </code></pre>
  <p>and resources/views/components/admin/listing-header.blade.php :</p>
  <pre><code>&lt;div class=&quot;p-2 pt-6 mb-4 flex&quot;&gt;
      &lt;div class=&quot;w-10/12 justify-start align-top&quot;&gt;
          &lt;h3 class=&quot;m-1 text-center flex items-center d1&quot;&gt;
              &lt;x-icon-svg :icon=&quot;'category'&quot; :title=&quot;'{{ $iconHint }}'&quot;&gt;&lt;/x-icon-svg&gt;
              &lt;span class=&quot;ml-2&quot;&gt;
                          {{ $itemsLength }}&amp;nbsp;@choice('category|categories', $itemsLength) from {{ $itemsTotalCount }}
                          &lt;/span&gt;
          &lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class=&quot;w-2/12 m-1 flex justify-end items-center align-top d2&quot;&gt;
                      &lt;span @click=&quot;refreshCategoriesListing()&quot; class=&quot;mr-5&quot;&gt;
                          &lt;x-icon-svg :icon=&quot;'refresh'&quot; :title=&quot;'Refresh categories listing'&quot; &gt;&lt;/x-icon-svg&gt;
                      &lt;/span&gt;
          &lt;span onclick=&quot;document.location.href='{{ route('admin.categories.create') }}'&quot;&gt;
                          &lt;x-icon-svg :icon=&quot;'add'&quot; title=&quot;Add new category&quot; &gt;&lt;/x-icon-svg&gt;
                      &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>MODIFIED BLOCK # 2:</strong></p>
  <p>I made some tests simplified example and removing component I created  a
  a new component, but not under admin directory with a command :</p>
  <pre><code>PHP artisan make: component  ListingHeader
  </code></pre>
  <p>and I filled in app/View/Components/ListingHeader.php :</p>
  <pre><code>&lt;?php
  
  namespace App\View\Components;
  
  use Illuminate\View\Component;
  
  class ListingHeader extends Component
  {
  
      public $iconHint= '';
      public $itemsLength= 0;
      public $itemsTotalCount= 0;
  
      public function __construct(string $iconHint= '', int $itemsLength= 0, int $itemsTotalCount= 0)
      {
          $this-&gt;iconHint= $iconHint;
          $this-&gt;itemsLength= $itemsLength;
          $this-&gt;itemsTotalCount= $itemsTotalCount;
      }
  
      /**
       * Get the view / contents that represent the component.
       *
       * @return \Illuminate\Contracts\View\View|string
       */
      public function render()
      {
          \Log::info(  varDump(-1, ' -1 render ListingHeader::') );
          return view('components.listing-header');
      }
  }
  </code></pre>
  <p>and in /resources/views/components/listing-header.blade.php :</p>
  <pre><code>&lt;div&gt;
      &lt;h1&gt;resources/views/components/listing-header.blade.php::{{ $iconHint  }}&lt;/h1&gt;
      &lt;!-- Very little is needed to make a happy life. - Marcus Antoninus --&gt;
  &lt;/div&gt;
  </code></pre>
  <p>and writing in parent index.blade.php :</p>
  <pre><code>111111&lt;x-listing-header
      :icon-hint=&quot;'Categories of the app'&quot;
  /&gt;222222
  </code></pre>
  <p>I see rendered text ok with valid value of $iconHint var
  But if in parent index.blade.php to pass laravel value :</p>
  <pre><code>111111&lt;x-listing-header
      :icon-hint=&quot;'Categories of the app'&quot;
      :items-length= &quot;{{ count($categories) }}&quot;
  /&gt;222222
  </code></pre>
  <p>The component is not rendered with double params inside of the component text:  <a href="https://prnt.sc/103oq9y" rel="nofollow noreferrer">https://prnt.sc/103oq9y</a></p>
  <p>Can not catch why so? If which way to pass the parameter?
  I suppose component rendered on server-side and no alpine confusion is possible...</p>
  <p>Thanks!</p>