Alpine not working outside volt
salfel opened this issue · comments
Volt Version
1.0.0
Laravel Version
1.0.4.1
PHP Version
8.1.2
Database Driver & Version
sqlite 2.8.17 ubuntu
Description
I just started tried using volt with a existing application, which includes a header with a modal written in alpine.
When using volt, the header didnt work anymore for some reason, but as soon as i cleared the @Volt directives, it worked just fine.
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
@vite(['resources/css
[Screencast from 29-07-23 13:27:31.webm](https://github.com/livewire/volt/assets/120563991/f409d66e-ffe7-4554-aa16-4a67a09e176c)
/app.css', 'resources/js/app.js'])
<title>{{ $title ?? 'Page Title' }}</title>
</head>
<body>
<x-nav.header />
<main class="pt-3">
{{ $slot }}
</main>
</body>
</html>
x-data="{
open: false,
toggle() {
if (this.open) {
return this.close()
}
[Screencast from 29-07-23 13:27:31.webm](https://github.com/livewire/volt/assets/120563991/cecd2eb0-ec4c-4440-8f29-c90a9caa6d1f)
this.$refs.button.focus();
this.open = true
},
close(focusAfter) {
if (! this.open) return;
this.open = false;
focusAfter && focusAfter.focus()
}
}"
x-on:keydown.escape.prevent.stop="close($refs.button)"
x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
x-id="['dropdown-button']"
class="relative"
>
<button
x-ref="button"
x-on:click="toggle()"
:aria-expanded="open"
:aria-controls="$id('dropwown-button')"
type="button"
>
{{ $button }}
</button>
<div
x-ref="panel"
x-show="open"
@click.outside="close($refs.button)"
x-transition.origin.top
:id="$id('dropdown-button')"
class="absolute right-0 mt-2 w-40 rounded-md bg-white shadow-md"
>
<a href="/dashboard" wire:navigate class="flex items-center gap-2 w-full px-3 py-1.5 text-sm hover:bg-gray-100">
Dashboard
</a>
<a href="/settings" wire:navigate class="flex items-center gap-2 w-full px-3 py-1.5 text-sm hover:bg-gray-100">
Settings
</a>
<hr class="divide-y my-1">
<form action="{{ route('auth.logout') }}" method="POST">
@csrf
[Screencast from 29-07-23 13:27:31.webm](https://github.com/livewire/volt/assets/120563991/34fe1ce3-3b0e-43d2-89f3-48bcb359b0f3)
<button type="submit"
class="flex items-center gap-2 w-full px-3 py-1.5 text-sm text-red-500 hover:bg-gray-100">
Logout
</button>
</form>
</div>
</div>```
### Steps To Reproduce
Ubuntu 22.04.2 LTS
Install Laravel Folio
Install Livewire 3
Install Laravel Volt
sorry, error happened to be on my end