Ensure Inertia pages are children of AppLayout

laravel · Jul 15, 2024 · fd20c20 · fd20c20
1 parent 0eecfe8
commit fd20c20
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 24 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@ composer.lock
 /phpunit.xml
 /.phpunit.cache
 .phpunit.result.cache
+.idea
diff --git a/src/Console/InstallCommand.php b/src/Console/InstallCommand.php
@@ -422,6 +422,7 @@ protected function installInertiaStack()
 
         // Inertia Pages...
         copy(__DIR__.'/../../stubs/inertia/resources/js/Pages/Dashboard.vue', resource_path('js/Pages/Dashboard.vue'));
+        copy(__DIR__.'/../../stubs/inertia/resources/js/Pages/PageContainer.vue', resource_path('js/Pages/PageContainer.vue'));
         copy(__DIR__.'/../../stubs/inertia/resources/js/Pages/PrivacyPolicy.vue', resource_path('js/Pages/PrivacyPolicy.vue'));
         copy(__DIR__.'/../../stubs/inertia/resources/js/Pages/TermsOfService.vue', resource_path('js/Pages/TermsOfService.vue'));
         copy(__DIR__.'/../../stubs/inertia/resources/js/Pages/Welcome.vue', resource_path('js/Pages/Welcome.vue'));

diff --git a/stubs/inertia/resources/js/Layouts/AppLayout.vue b/stubs/inertia/resources/js/Layouts/AppLayout.vue
@@ -1,17 +1,13 @@
 <script setup>
 import { ref } from 'vue';
-import { Head, Link, router } from '@inertiajs/vue3';
+import { Link, router } from '@inertiajs/vue3';
 import ApplicationMark from '@/Components/ApplicationMark.vue';
 import Banner from '@/Components/Banner.vue';
 import Dropdown from '@/Components/Dropdown.vue';
 import DropdownLink from '@/Components/DropdownLink.vue';
 import NavLink from '@/Components/NavLink.vue';
 import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
 
-defineProps({
-    title: String,
-});
-
 const showingNavigationDropdown = ref(false);
 
 const switchToTeam = (team) => {
@@ -29,8 +25,6 @@ const logout = () => {
 
 <template>
     <div>
-        <Head :title="title" />
-
         <Banner />
 
         <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
@@ -273,13 +267,6 @@ const logout = () => {
                 </div>
             </nav>
 
-            <!-- Page Heading -->
-            <header v-if="$slots.header" class="bg-white dark:bg-gray-800 shadow">
-                <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-                    <slot name="header" />
-                </div>
-            </header>
-
             <!-- Page Content -->
             <main>
                 <slot />

diff --git a/stubs/inertia/resources/js/Pages/API/Index.vue b/stubs/inertia/resources/js/Pages/API/Index.vue
@@ -1,6 +1,11 @@
 <script setup>
 import ApiTokenManager from '@/Pages/API/Partials/ApiTokenManager.vue';
 import AppLayout from '@/Layouts/AppLayout.vue';
+import PageContainer from "@/Pages/PageContainer.vue";
+
+defineOptions({
+    layout: AppLayout,
+})
 
 defineProps({
     tokens: Array,
@@ -10,7 +15,7 @@ defineProps({
 </script>
 
 <template>
-    <AppLayout title="API Tokens">
+    <PageContainer title="API Tokens">
         <template #header>
             <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                 API Tokens
@@ -26,5 +31,5 @@ defineProps({
                 />
             </div>
         </div>
-    </AppLayout>
+    </PageContainer>
 </template>
diff --git a/stubs/inertia/resources/js/Pages/Dashboard.vue b/stubs/inertia/resources/js/Pages/Dashboard.vue
@@ -1,10 +1,15 @@
 <script setup>
 import AppLayout from '@/Layouts/AppLayout.vue';
 import Welcome from '@/Components/Welcome.vue';
+import PageContainer from "@/Pages/PageContainer.vue";
+
+defineOptions({
+    layout: AppLayout,
+})
 </script>
 
 <template>
-    <AppLayout title="Dashboard">
+    <PageContainer title="Dashboard">
         <template #header>
             <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                 Dashboard
@@ -18,5 +23,5 @@ import Welcome from '@/Components/Welcome.vue';
                 </div>
             </div>
         </div>
-    </AppLayout>
+    </PageContainer>
 </template>
diff --git a/stubs/inertia/resources/js/Pages/PageContainer.vue b/stubs/inertia/resources/js/Pages/PageContainer.vue
@@ -0,0 +1,20 @@
+<script setup>
+import { Head } from '@inertiajs/vue3';
+
+defineProps({
+    title: String,
+});
+</script>
+
+<template>
+    <Head :title="title" />
+
+    <!-- Page Heading -->
+    <header v-if="$slots.header" class="bg-white dark:bg-gray-800 shadow">
+        <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+            <slot name="header" />
+        </div>
+    </header>
+
+    <slot />
+</template>
diff --git a/stubs/inertia/resources/js/Pages/Profile/Show.vue b/stubs/inertia/resources/js/Pages/Profile/Show.vue
@@ -6,6 +6,11 @@ import SectionBorder from '@/Components/SectionBorder.vue';
 import TwoFactorAuthenticationForm from '@/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue';
 import UpdatePasswordForm from '@/Pages/Profile/Partials/UpdatePasswordForm.vue';
 import UpdateProfileInformationForm from '@/Pages/Profile/Partials/UpdateProfileInformationForm.vue';
+import PageContainer from "@/Pages/PageContainer.vue";
+
+defineOptions({
+    layout: AppLayout,
+})
 
 defineProps({
     confirmsTwoFactorAuthentication: Boolean,
@@ -14,7 +19,7 @@ defineProps({
 </script>
 
 <template>
-    <AppLayout title="Profile">
+    <PageContainer title="Profile">
         <template #header>
             <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                 Profile
@@ -53,5 +58,5 @@ defineProps({
                 </template>
             </div>
         </div>
-    </AppLayout>
+    </PageContainer>
 </template>
diff --git a/stubs/inertia/resources/js/Pages/Teams/Create.vue b/stubs/inertia/resources/js/Pages/Teams/Create.vue
@@ -1,10 +1,15 @@
 <script setup>
 import AppLayout from '@/Layouts/AppLayout.vue';
 import CreateTeamForm from '@/Pages/Teams/Partials/CreateTeamForm.vue';
+import PageContainer from "@/Pages/PageContainer.vue";
+
+defineOptions({
+    layout: AppLayout,
+})
 </script>
 
 <template>
-    <AppLayout title="Create Team">
+    <PageContainer title="Create Team">
         <template #header>
             <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                 Create Team
@@ -16,5 +21,5 @@ import CreateTeamForm from '@/Pages/Teams/Partials/CreateTeamForm.vue';
                 <CreateTeamForm />
             </div>
         </div>
-    </AppLayout>
+    </PageContainer>
 </template>
diff --git a/stubs/inertia/resources/js/Pages/Teams/Show.vue b/stubs/inertia/resources/js/Pages/Teams/Show.vue
@@ -4,6 +4,11 @@ import DeleteTeamForm from '@/Pages/Teams/Partials/DeleteTeamForm.vue';
 import SectionBorder from '@/Components/SectionBorder.vue';
 import TeamMemberManager from '@/Pages/Teams/Partials/TeamMemberManager.vue';
 import UpdateTeamNameForm from '@/Pages/Teams/Partials/UpdateTeamNameForm.vue';
+import PageContainer from "@/Pages/PageContainer.vue";
+
+defineOptions({
+    layout: AppLayout,
+})
 
 defineProps({
     team: Object,
@@ -13,7 +18,7 @@ defineProps({
 </script>
 
 <template>
-    <AppLayout title="Team Settings">
+    <PageContainer title="Team Settings">
         <template #header>
             <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                 Team Settings
@@ -38,5 +43,5 @@ defineProps({
                 </template>
             </div>
         </div>
-    </AppLayout>
+    </PageContainer>
 </template>