Skip to content
This repository has been archived by the owner on Feb 27, 2024. It is now read-only.

Commit

Permalink
Handling of Blade Slots in Vue Slots
Browse files Browse the repository at this point in the history
  • Loading branch information
pascalbaljet committed Feb 16, 2024
1 parent 8ff75b2 commit 0a9471f
Show file tree
Hide file tree
Showing 18 changed files with 304 additions and 330 deletions.
164 changes: 82 additions & 82 deletions app/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 8 additions & 2 deletions app/resources/js/CustomVueComponent.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
<script setup></script>
<template>
<article>Hey from custom Vue component. Here is my slot:</article>
<main><slot></slot></main>
<div dusk="custom-vue-component">
<p>This Custom Vue Component</p>

<div style="background: #d3d3d3; padding: 15px">
<p>Vue Component's slot:</p>
<slot></slot>
</div>
</div>
</template>
12 changes: 12 additions & 0 deletions app/resources/views/components/child-a.blade.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<script setup></script>

<div dusk="child-a">
<p>This is Child A, rendering Child B:</p>

<x-child-b>
<div style="background: #e3e3e3; padding: 15px;">
<p>Child A's slot:</p>
{{ $slot }}
</div>
</x-child-b>
</div>
15 changes: 15 additions & 0 deletions app/resources/views/components/child-b.blade.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<script setup>
import CustomVueComponent from '@/CustomVueComponent.vue';
</script>

<div dusk="child-b">
<p>This is Child B, rendering a Custom Vue Component</p>

<div style="background: #f3f3f3; padding: 15px;">
<p>Child B's slot:</p>

<CustomVueComponent>
{{ $slot }}
</CustomVueComponent>
</div>
</div>
25 changes: 15 additions & 10 deletions app/resources/views/components/child.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,22 @@
const childVar = ref("What's that, Hawaiian Noises?");
</script>

<h2>Child component</h2>
<p>This is Child component</p>

<div>
<h3 v-html="childVar" />
<div dusk="slot">
{{ $slot }}
<p v-html="childVar" />
</div>
<div style="background: #e3e3e3; padding: 15px;">
<div>
<h3 v-html="childVar" />

<div dusk="slot" style="background: #d3d3d3; padding: 15px;">
<p>Child's slot:</p>
{{ $slot }}
<p>Render ref from child: <span v-html="childVar" /></p>
</div>

<div dusk="subslot">
{{ $subslot }}
<p v-html="childVar" />
<div dusk="subslot" style="background: #c3c3c3; padding: 15px;">
<p>Child's sub-slot:</p>
{{ $subslot }}
<p>Render ref from child: <span v-html="childVar" /></p>
</div>
</div>
</div>

This file was deleted.

6 changes: 0 additions & 6 deletions app/resources/views/components/component-with-slot.blade.php

This file was deleted.

Loading

0 comments on commit 0a9471f

Please sign in to comment.