Added test route

app/app/View/Components/Child.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Child extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.child');
+    }
+}

app/app/View/Components/Root.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Root extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.root');
+    }
+}

app/resources/views/components/child.blade.php

@@ -0,0 +1,9 @@
+<script setup>
+    const childVar = ref('Hello from child component');
+</script>
+
+<h2>Child component</h2>
+<div>
+    <h3>Slot <span v-html="childVar" /></h3>
+    {{ $slot }}
+</div>

app/resources/views/components/root.blade.php

@@ -0,0 +1,20 @@
+<script setup>
+    const count = ref(0)
+
+    const emit = defineEmits(['incremented'])
+
+    function increment() {
+        count.value++
+        emit('incremented')
+    }
+</script>
+
+<h2>Parent component</h2>
+<p>Count: @{{ count }}</p>
+
+<button @click="increment">Increment</button>
+
+<x-child>
+    Child Slot
+    <p>Count: @{{ count }}</p>
+</x-child>

app/resources/views/slot.blade.php

@@ -0,0 +1,9 @@
+<x-layout>
+    <script setup>
+        const layoutCounter = ref(0)
+    </script>
+
+    <p>Layout counter: @{{ layoutCounter }}</p>
+
+    <x-root @incremented="layoutCounter++" />
+</x-layout>

app/routes/web.php

@@ -35,6 +35,7 @@
 Route::view('/refresh', 'refresh')->middleware(Refreshable::class);
 Route::view('/refresh-state', 'refresh-state')->middleware(Refreshable::class);
 Route::view('/regular-view', 'regular-view');
+Route::view('/slot', 'slot');
 Route::view('/to-vue-prop', 'to-vue-prop');
 Route::view('/two-way-binding', 'two-way-binding');