1

I was looking through the implementation of Laravel Breeze to see how they built the front end. I understand everything in the blade file except for a few things which have syntax I don't understand.

Within navigation.blade.php you can find the following:

<button @click="open = !open" class...>

<div :class="{'block':open, 'hidden': ! open}"

As for the first one, I'm not sure if @click is a blade directive. It doesn't seem like it is, but I don't understand the purpose of the @ sign and I can't figure out what open = ! open means either. Is open a variable? It kind of resembles a "not equal" operator but I don't think it's that either.

As for the second one, I can't figure out how it works. Are these keys/values? Are they being passed through to some other component? I know the colon notation can be used to pass in non-hardcoded data, but I'm not sure what is happening after the equal sign.

Marissa
  • 185
  • 1
  • 3
  • 13
  • That's not blade syntax. That is VueJS syntax. Laravel Breeze has Intertia.js powered by VueJS stack. https://laravel.com/docs/8.x/starter-kits#laravel-breeze – Siddharth Bhansali Nov 19 '21 at 08:04
  • @SiddharthBhansali I only ran ```php artisan breeze:install``` as opposed to ```php artisan breeze:install vue``` so I shouldn't have inertia installed at all. Does breeze alone come with Vue? edit - According to this link https://dev.to/ellis22/laravel-breeze-minimal-simple-authentication-scaffolding-2p0g just installing breeze shouldn't come with inertia. – Marissa Nov 19 '21 at 08:11
  • You are correct, inertia shouldn't install unless you used the vue parameter. The `@click` in your code is of `AlpineJs`. To check, open `app.js` and you'll see that Alpine is loaded. Apparently Breeze uses this by default now. – Siddharth Bhansali Nov 19 '21 at 09:07
  • search for some tutorials with livewire or refer livewire tutorial page should make you clear, SO community can answer but it is better to refer docs. – bhucho Nov 19 '21 at 16:07

0 Answers0