May 12, 2022
0
Level 6
How to display all the components inside main slot?
Hello Guys, I used Inertia-vue. How to display components inside the slot?
I tried to do it this way but it will only dispaly the component that I rendered and the navbar, sidebar and footer is not displayed.
This is my Authenticated.vue
<script setup>
import { ref } from 'vue';
import BreezeApplicationLogo from '@/Components/ApplicationLogo.vue';
import BreezeDropdown from '@/Components/Dropdown.vue';
import BreezeDropdownLink from '@/Components/DropdownLink.vue';
import BreezeNavLink from '@/Components/NavLink.vue';
import BreezeResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
import { Link } from '@inertiajs/inertia-vue3';
import Header from '@/Pages/shared/Header.vue';
import Navbar from '@/Pages/shared/Navbar.vue';
import Sidebar from '@/Pages/shared/Sidebar.vue';
import Footer from '@/Pages/shared/Footer.vue';
const showingNavigationDropdown = ref(false);
</script>
<template>
<div>
<div id="root" class="root mn--max hd--expanded">
<section id="content" class="content">
<main>
<slot />
</main>
<Footer/>
</section>
<Header/>
<Navbar/>
<Sidebar/>
</div>
<!-- SCROLL TO TOP BUTTON -->
<div class="scroll-container">
<a href="#root" class="scroll-page rounded-circle ratio ratio-1x1" aria-label="Scroll button"></a>
</div>
</div>
</template>
My route :Route::inertia('/users', 'User/UserList');
My menu link : <Link href="users" class="nav-link">Users</Link>
and this is the UserList component
<template>
<div class="content__boxed">
<div class="content__wrap">
<!-- Table with toolbar -->
<div class="card">
<div class="card-header -4 mb-3">
<h5 class="card-title mb-3">Table with toolbar</h5>
<div class="row">
<!-- Left toolbar -->
<div class="col-md-6 d-flex gap-1 align-items-center mb-3">
<button class="btn btn-primary hstack gap-2 align-self-center">
<i class="demo-psi-add fs-5"></i>
<span class="vr"></span>
Add New
</button>
<button class="btn btn-icon btn-outline-light">
<i class="demo-pli-printer fs-5"></i>
</button>
<div class="btn-group">
<button class="btn btn-icon btn-outline-light"><i class="demo-pli-exclamation fs-5"></i></button>
<button class="btn btn-icon btn-outline-light"><i class="demo-pli-recycling fs-5"></i></button>
</div>
</div>
<!-- END : Left toolbar -->
<!-- Right Toolbar -->
<div class="col-md-6 d-flex gap-1 align-items-center justify-content-md-end mb-3">
<div class="form-group">
<input type="text" placeholder="Search..." class="form-control" autocomplete="off">
</div>
<div class="btn-group">
<button class="btn btn-icon btn-outline-light"><i class="demo-pli-download-from-cloud fs-5"></i></button>
<div class="btn-group dropdown">
<button class="btn btn-icon btn-outline-light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-end" style="">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
<!-- END : Right Toolbar -->
</div>
</div>
<div class="card-body">
<div class="table-responsove">
<table class="table table-striped">
<thead>
<tr>
<th class="text-center">Invoice</th>
<th>User</th>
<th>Order date</th>
<th>Amount</th>
<th>Status</th>
<th>Tracking Number</th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="btn-link" href="#"> Order #53431</a></td>
<td>Steve N. Horton</td>
<td><span class="text-muted"><i class="demo-pli-clock"></i> Oct 22, 2021</span></td>
<td>.00</td>
<td class="fs-5">
<div class="badge d-block bg-success">Paid</div>
</td>
<td>-</td>
</tr>
<tr>
<td><a class="btn-link" href="#"> Order #53432</a></td>
<td>Charles S Boyle</td>
<td><span class="text-muted"><i class="demo-pli-clock"></i> Oct 24, 2021</span></td>
<td>5.30</td>
<td class="fs-5">
<div class="badge d-block bg-danger">Refund</div>
</td>
<td><i class="demo-pli-mine"></i> CGX0089734531</td>
</tr>
<tr>
<td><a class="btn-link" href="#"> Order #53433</a></td>
<td>Lucy Doe</td>
<td><span class="text-muted"><i class="demo-pli-clock"></i> Oct 24, 2021</span></td>
<td>.00</td>
<td class="fs-5">
<div class="badge d-block bg-info">Shipped</div>
</td>
<td><i class="demo-pli-mine"></i> CGX0089934571</td>
</tr>
<tr>
<td><a class="btn-link" href="#"> Order #53434</a></td>
<td>Teresa L. Doe</td>
<td><span class="text-muted"><i class="demo-pli-clock"></i> Oct 15, 2021</span></td>
<td>.99</td>
<td class="fs-5">
<div class="badge d-block bg-info">Shipped</div>
</td>
<td><i class="demo-pli-mine"></i> CGX0089734574</td>
</tr>
<tr>
<td><a class="btn-link" href="#"> Order #53435</a></td>
<td>Teresa L. Doe</td>
<td><span class="text-muted"><i class="demo-pli-clock"></i> Oct 12, 2021</span></td>
<td>.00</td>
<td class="fs-5">
<div class="badge d-block bg-success">Paid</div>
</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<nav class="text-align-center mt-5" aria-label="Table navigation">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item disabled"><a class="page-link" href="#">...</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- END : Table with toolbar -->
</div>
</div>
</template>
```
Please or to participate in this conversation.