unexpected token "endif", expecting end of file blade component

Question

I'm trying to dynamically change the classes depending on the route in laravel, however using this:

<x-ui.general.dashboard_link href="/dashboard/calendar" @if ("hello" == "hello") class="text-sm" @endif>CALENDAR</x-ui.general.dashboard_link>

I get "syntax error, unexpected token "endif", expecting end of file", all @if and @endif's are closed and have the correct tags, this only occurs on blade component tags. Why?

Answer 1

In Laravel's Blade templating engine, Blade directives like @if, @else, @endif, etc., are not directly compatible inside Blade components when you're passing in attributes or props like href or class.

Instead, you can use PHP's ternary conditional operator as a workaround, or set a variable before the component:

<x-ui.general.dashboard_link href="/dashboard/calendar" :class="('hello' == 'hello') ? 'text-sm' : ''">CALENDAR</x-ui.general.dashboard_link>

Answer 2

The error you are encountering is due the fact that you cannot use blade directives such as @if and @endif within the attributes of a blade component. Instead, you can use a ternary operator to conditionally set the class attribute like this:

<x-ui.general.dashboard_link href="/dashboard/calendar" :class="('hello' == 'hello') ? 'text-sm' : ''">CALENDAR</x-ui.general.dashboard_link>