Question 161356 in Laravel Question posted in
The official Laravel Documentation can be found here.

Why isn’t my Blade component showing when using Alpinejs?

I tried to create a simple Laravel app with Alpinejs installed locally via Yarn. I followed a simple example from YT about creating Laravel blade components and it’s working fine using the CDN version. But, not working on Alpinejs installed locally, and got the error below. enter image description here

resources/views/components/input/group.blade.php

@props(['label', 'error' => null])

<div x-data x-id="['input']" {{ $attributes }}>
    <label x-bind:for="$id('input')" {{ $attributes->class('block mb-2 text-sm font-medium text-gray-900') }}>
        {{ $label }}
    </label>

    {{ $slot }}
</div>

@if ($error)
    <div class="text-sm text-red-600 !mt-1">{{ $error }}</div>
@endif

resources/views/components/input/select.blade.php

@aware(['error'])
@props(['error' => null])

<div>
    <select x-bind:id="$id('input')"
        {{ $attributes->class([
            'bg-gray-50 border text-gray-900 text-sm rounded focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5',
            'border-gray-300' => !$error,
            'border-red-500' => $error,
        ]) }}>
        {{ $slot }}
    </select>
</div>

index.blade.php

<!DOCTYPE html>
<html lang="en" class="min-w-[300px]">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <script src="{{ mix('js/alpine.js') }}"></script>
    <link rel="stylesheet" href="{{ mix('css/tailwind.css') }}">
</head>

<body class="flex flex-col items-center">
    @verbatim
        <div class="max-w-[768px] min-h-screen bg-cover bg-center bg-black">
            <div class="p-8">
                <img src="test.jpg">

                <div x-data="alpineMixin" x-cloak class="space-y-3">
                    <x-input.group label="Your Age" class="text-white" :error="$errors->first('age')">
                        <x-input.select x-model="profile.age" name="age">
                            <template x-for="n in 53" :key="n">
                                <option :value="n + 17" x-text="n === 53 ? '70+' : n + 17"
                                    :selected="profile.age == n + 17"></option>
                            </template>
                        </x-input.select>
                    </x-input.group>
                </div>
            </div>
        </div>
    @endverbatim

    <script src="/js/manifest.js"></script>
</body>

</html>

Please note that I want to use alpinejs installed via yarn.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Hmmm, removing the @verbatim solves my issue. I think it's interfering with the rendering of Alpinejs components preventing the dynamic behavior from working correctly.


  2. 0 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine-ie11.min.js" integrity="sha512-Atu8sttM7mNNMon28+GHxLdz4Xo2APm1WVHwiLW9gW4bmHpHc/E2IbXrj98SmefTmbqbUTOztKl5PDPiu0LD/A==" crossorigin="anonymous"></script>

    you should try this above link CDN in your index blade

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search