Use new persistent layouts and Vue Meta plugin

package-lock.json

@@ -10120,6 +10120,21 @@
                 "vue-style-loader": "^4.1.0"
             }
         },
+        "vue-meta": {
+            "version": "2.2.2",
+            "resolved": "https://registry.npmjs.org/vue-meta/-/vue-meta-2.2.2.tgz",
+            "integrity": "sha512-aSzjfc5xV3szxPZMsSk6JeoHUqwrVHNPzpMciTCek56LDd2xKWCv+Ch4IGWL5EIxVyfxA+krsD7T11PTyLY4TQ==",
+            "requires": {
+                "deepmerge": "^4.0.0"
+            },
+            "dependencies": {
+                "deepmerge": {
+                    "version": "4.0.0",
+                    "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.0.0.tgz",
+                    "integrity": "sha512-YZ1rOP5+kHor4hMAH+HRQnBQHg+wvS1un1hAOuIcxcBy0hzcUf6Jg2a1w65kpoOUnurOfZbERwjI1TfZxNjcww=="
+                }
+            }
+        },
         "vue-style-loader": {
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

package.json

@@ -29,5 +29,8 @@
         "tailwindcss": "^0.7.4",
         "vue": "^2.6.6",
         "vue-template-compiler": "^2.6.6"
+    },
+    "dependencies": {
+        "vue-meta": "^2.2.2"
     }
 }

resources/js/Pages/Auth/Login.vue

@@ -28,6 +28,7 @@ import Logo from '@/Shared/Logo'
 import TextInput from '@/Shared/TextInput'
 
 export default {
+  metaInfo: { title: 'Login' },
   components: {
     LoadingButton,
     Logo,
@@ -46,9 +47,6 @@ export default {
       },
     }
   },
-  mounted() {
-    document.title = 'Login | Ping CRM'
-  },
   methods: {
     submit() {
       this.sending = true

resources/js/Pages/Contacts/Create.vue

@@ -1,5 +1,5 @@
 <template>
-  <layout title="Create Contact">
+  <div>
     <h1 class="mb-8 font-bold text-3xl">
       <inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('contacts')">Contacts</inertia-link>
       <span class="text-indigo-light font-medium">/</span> Create
@@ -30,7 +30,7 @@
         </div>
       </form>
     </div>
-  </layout>
+  </div>
 </template>
 
 <script>
@@ -40,8 +40,9 @@ import SelectInput from '@/Shared/SelectInput'
 import TextInput from '@/Shared/TextInput'
 
 export default {
+  metaInfo: { title: 'Create Contact' },
+  layout: (h, page) => h(Layout, [page]),
   components: {
-    Layout,
     LoadingButton,
     SelectInput,
     TextInput,

resources/js/Pages/Contacts/Edit.vue

@@ -1,5 +1,5 @@
 <template>
-  <layout :title="`${form.first_name} ${form.last_name}`">
+  <div>
     <h1 class="mb-8 font-bold text-3xl">
       <inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('contacts')">Contacts</inertia-link>
       <span class="text-indigo-light font-medium">/</span>
@@ -35,7 +35,7 @@
         </div>
       </form>
     </div>
-  </layout>
+  </div>
 </template>
 
 <script>
@@ -46,8 +46,13 @@ import TextInput from '@/Shared/TextInput'
 import TrashedMessage from '@/Shared/TrashedMessage'
 
 export default {
+  metaInfo() {
+    return {
+      title: `${this.form.first_name} ${this.form.last_name}`,
+    }
+  },
+  layout: (h, page) => h(Layout, [page]),
   components: {
-    Layout,
     LoadingButton,
     SelectInput,
     TextInput,

resources/js/Pages/Contacts/Index.vue

@@ -1,5 +1,5 @@
 <template>
-  <layout title="Contacts">
+  <div>
     <h1 class="mb-8 font-bold text-3xl">Contacts</h1>
     <div class="mb-6 flex justify-between items-center">
       <search-filter v-model="form.search" class="w-full max-w-sm mr-4" @reset="reset">
@@ -59,7 +59,7 @@
       </table>
     </div>
     <pagination :links="contacts.links" />
-  </layout>
+  </div>
 </template>
 
 <script>
@@ -70,9 +70,10 @@ import Pagination from '@/Shared/Pagination'
 import SearchFilter from '@/Shared/SearchFilter'
 
 export default {
+  metaInfo: { title: 'Contacts' },
+  layout: (h, page) => h(Layout, [page]),
   components: {
     Icon,
-    Layout,
     Pagination,
     SearchFilter,
   },

resources/js/Pages/Dashboard/Index.vue

@@ -1,20 +1,19 @@
 <template>
-  <layout title="Dashboard">
+  <div>
     <h1 class="mb-8 font-bold text-3xl">Dashboard</h1>
     <p class="mb-12 leading-normal">Hey there! Welcome to Ping CRM, a demo app designed to help illustrate how <a class="text-indigo underline hover:text-orange-dark" href="https://github.com/inertiajs">Inertia.js</a> works.</p>
     <div>
       <inertia-link class="btn-indigo" href="/500">500 error</inertia-link>
       <inertia-link class="btn-indigo" href="/404">404 error</inertia-link>
     </div>
-  </layout>
+  </div>
 </template>
 
 <script>
 import Layout from '@/Shared/Layout'
 
 export default {
-  components: {
+  metaInfo: { title: 'Dashboard' },
-    Layout,
+  layout: Layout,
-  },
 }
 </script>

resources/js/Pages/Organizations/Create.vue

@@ -1,5 +1,5 @@
 <template>
-  <layout title="Create Organization">
+  <div>
     <h1 class="mb-8 font-bold text-3xl">
       <inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('organizations')">Organizations</inertia-link>
       <span class="text-indigo-light font-medium">/</span> Create
@@ -25,7 +25,7 @@
         </div>
       </form>
     </div>
-  </layout>
+  </div>
 </template>
 
 <script>
@@ -35,8 +35,9 @@ import SelectInput from '@/Shared/SelectInput'
 import TextInput from '@/Shared/TextInput'
 
 export default {
+  metaInfo: { title: 'Create Organization' },
+  layout: (h, page) => h(Layout, [page]),
   components: {
-    Layout,
     LoadingButton,
     SelectInput,
     TextInput,

resources/js/Pages/Organizations/Edit.vue

@@ -1,5 +1,5 @@
 <template>
-  <layout :title="form.name">
+  <div>
     <h1 class="mb-8 font-bold text-3xl">
       <inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('organizations')">Organizations</inertia-link>
       <span class="text-indigo-light font-medium">/</span>
@@ -66,7 +66,7 @@
         </tr>
       </table>
     </div>
-  </layout>
+  </div>
 </template>
 
 <script>
@@ -78,9 +78,12 @@ import TextInput from '@/Shared/TextInput'
 import TrashedMessage from '@/Shared/TrashedMessage'
 
 export default {
+  metaInfo() {
+    return { title: this.form.name }
+  },
+  layout: (h, page) => h(Layout, [page]),
   components: {
     Icon,
-    Layout,
     LoadingButton,
     SelectInput,
     TextInput,

resources/js/Pages/Organizations/Index.vue

@@ -1,5 +1,5 @@
 <template>
-  <layout title="Organizations">
+  <div>
     <h1 class="mb-8 font-bold text-3xl">Organizations</h1>
     <div class="mb-6 flex justify-between items-center">
       <search-filter v-model="form.search" class="w-full max-w-sm mr-4" @reset="reset">
@@ -51,7 +51,7 @@
       </table>
     </div>
     <pagination :links="organizations.links" />
-  </layout>
+  </div>
 </template>
 
 <script>
@@ -62,9 +62,10 @@ import Pagination from '@/Shared/Pagination'
 import SearchFilter from '@/Shared/SearchFilter'
 
 export default {
+  metaInfo: { title: 'Organizations' },
+  layout: (h, page) => h(Layout, [page]),
   components: {
     Icon,
-    Layout,
     Pagination,
     SearchFilter,
   },

resources/js/Pages/Reports/Index.vue

@@ -1,15 +1,14 @@
 <template>
-  <layout title="Reports">
+  <div>
     <h1 class="mb-8 font-bold text-3xl">Reports</h1>
-  </layout>
+  </div>
 </template>
 
 <script>
 import Layout from '@/Shared/Layout'
 
 export default {
-  components: {
+  metaInfo: { title: 'Reports' },
-    Layout,
+  layout: (h, page) => h(Layout, [page]),
-  },
 }
 </script>

resources/js/Pages/Users/Create.vue

@@ -1,5 +1,5 @@
 <template>
-  <layout title="Create User">
+  <div>
     <h1 class="mb-8 font-bold text-3xl">
       <inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('users')">Users</inertia-link>
       <span class="text-indigo-light font-medium">/</span> Create
@@ -22,7 +22,7 @@
         </div>
       </form>
     </div>
-  </layout>
+  </div>
 </template>
 
 <script>
@@ -33,8 +33,9 @@ import TextInput from '@/Shared/TextInput'
 import FileInput from '@/Shared/FileInput'
 
 export default {
+  metaInfo: { title: 'Create User' },
+  layout: (h, page) => h(Layout, [page]),
   components: {
-    Layout,
     LoadingButton,
     SelectInput,
     TextInput,

resources/js/Pages/Users/Edit.vue

@@ -1,5 +1,5 @@
 <template>
-  <layout :title="`${form.first_name} ${form.last_name}`">
+  <div>
     <div class="mb-8 flex justify-start max-w-lg">
       <h1 class="font-bold text-3xl">
         <inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('users')">Users</inertia-link>
@@ -30,7 +30,7 @@
         </div>
       </form>
     </div>
-  </layout>
+  </div>
 </template>
 
 <script>
@@ -42,8 +42,13 @@ import FileInput from '@/Shared/FileInput'
 import TrashedMessage from '@/Shared/TrashedMessage'
 
 export default {
+  metaInfo() {
+    return {
+      title: `${this.form.first_name} ${this.form.last_name}`,
+    }
+  },
+  layout: (h, page) => h(Layout, [page]),
   components: {
-    Layout,
     LoadingButton,
     SelectInput,
     TextInput,

resources/js/Pages/Users/Index.vue

@@ -1,5 +1,5 @@
 <template>
-  <layout title="Users">
+  <div>
     <h1 class="mb-8 font-bold text-3xl">Users</h1>
     <div class="mb-6 flex justify-between items-center">
       <search-filter v-model="form.search" class="w-full max-w-sm mr-4" @reset="reset">
@@ -57,7 +57,7 @@
         </tr>
       </table>
     </div>
-  </layout>
+  </div>
 </template>
 
 <script>
@@ -67,9 +67,10 @@ import Layout from '@/Shared/Layout'
 import SearchFilter from '@/Shared/SearchFilter'
 
 export default {
+  metaInfo: { title: 'Users' },
+  layout: (h, page) => h(Layout, [page]),
   components: {
     Icon,
-    Layout,
     SearchFilter,
   },
   props: {

resources/js/Shared/Layout.vue

@@ -2,7 +2,7 @@
   <div>
     <portal-target name="dropdown" slim />
     <div class="flex flex-col">
-      <div class="min-h-screen flex flex-col" @click="hideDropdownMenus">
+      <div class="h-screen flex flex-col" @click="hideDropdownMenus">
         <div class="md:flex">
           <div class="bg-indigo-darkest md:flex-no-shrink md:w-56 px-6 py-4 flex items-center justify-between md:justify-center">
             <inertia-link class="mt-1" href="/">
@@ -33,11 +33,9 @@
             </dropdown>
           </div>
         </div>
-        <div class="flex flex-grow">
+        <div class="flex flex-grow overflow-hidden">
-          <div class="bg-indigo-darker flex-no-shrink w-56 p-12 hidden md:block">
+          <main-menu class="bg-indigo-darker flex-no-shrink w-56 p-12 hidden md:block overflow-y-auto" />
-            <main-menu />
+          <div class="w-full overflow-hidden px-4 py-8 md:p-12 overflow-y-auto" scroll-region>
-          </div>
-          <div class="w-full overflow-hidden px-4 py-8 md:p-12">
             <flash-messages />
             <slot />
           </div>
@@ -62,23 +60,12 @@ export default {
     Logo,
     MainMenu,
   },
-  props: {
-    title: String,
-  },
   data() {
     return {
       showUserMenu: false,
       accounts: null,
     }
   },
-  watch: {
-    title: {
-      immediate: true,
-      handler(title) {
-        document.title = title ? `${title} | Ping CRM` : 'Ping CRM'
-      },
-    },
-  },
   methods: {
     hideDropdownMenus() {
       this.showUserMenu = false

resources/js/app.js

@@ -1,15 +1,21 @@
-import { InertiaApp } from '@inertiajs/inertia-vue'
-import PortalVue from 'portal-vue'
 import Vue from 'vue'
+import VueMeta from 'vue-meta'
+import PortalVue from 'portal-vue'
+import { InertiaApp } from '@inertiajs/inertia-vue'
 
 Vue.config.productionTip = false
 Vue.mixin({ methods: { route: window.route } })
 Vue.use(InertiaApp)
 Vue.use(PortalVue)
+Vue.use(VueMeta)
 
 let app = document.getElementById('app')
 
 new Vue({
+  metaInfo: {
+    title: 'Loading…',
+    titleTemplate: '%s | Ping CRM',
+  },
   render: h => h(InertiaApp, {
     props: {
       initialPage: JSON.parse(app.dataset.page),