feat: make use of defineOptions() to assign page title

Signed-off-by: Fery Wardiyanto <[email protected]>
creasico · Sep 18, 2023 · 1092c6e · 1092c6e
1 parent dc5d11c
commit 1092c6e
Show file tree

Hide file tree

Showing 16 changed files with 53 additions and 47 deletions.
diff --git a/resources/client/app.ts b/resources/client/app.ts
@@ -41,7 +41,7 @@ createInertiaApp({
     if (!layout)
       throw new Error(`Could not find page layout '${layoutName}'`)
 
-    page.default.layout = h(layout.default)
+    page.default.layout = h(layout.default, { title: page.default.pageName })
 
     return page
   },

diff --git a/resources/client/layouts/app-layout.vue b/resources/client/layouts/app-layout.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { usePage } from '@inertiajs/vue3'
+import { Head as iHead, usePage } from '@inertiajs/vue3'
 import type { MaybeElement } from '@vueuse/core'
 import { breakpointsTailwind } from '@vueuse/core'
 import type { MenuInst } from 'naive-ui'
@@ -9,6 +9,10 @@ defineOptions({
   inheritAttrs: false,
 })
 
+const { title } = defineProps<{
+  title?: string
+}>()
+
 const mainMenu = ref<MenuInst | null>(null)
 const userMenu = ref<VNode | null>(null)
 const sider = ref<MaybeElement | null>(null)
@@ -60,6 +64,8 @@ function touchEnd(e: TouchEvent) {
 </script>
 
 <template>
+  <i-head v-if="title" :title="$t(title)" />
+
   <app-wrapper class="app-layout">
     <n-layout has-sider @touchstart="touchStart" @touchend="touchEnd">
       <n-layout-sider
@@ -146,10 +152,6 @@ function touchEnd(e: TouchEvent) {
         @apply w-full;
       }
     }
-
-    &-content > &-scroll-container {
-      @apply py-6 px-2 sm:px-6;
-    }
   }
 }
 

diff --git a/resources/client/layouts/guest-layout.vue b/resources/client/layouts/guest-layout.vue
@@ -1,10 +1,18 @@
 <script setup lang="ts">
+import { Head as iHead } from '@inertiajs/vue3'
+
 defineOptions({
   inheritAttrs: false,
 })
+
+const { title } = defineProps<{
+  title?: string
+}>()
 </script>
 
 <template>
+  <i-head v-if="title" :title="$t(title)" />
+
   <app-wrapper class="guest-layout">
     <n-layout>
       <n-space vertical>

diff --git a/resources/client/pages/account/profile.vue b/resources/client/pages/account/profile.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Head as iHead } from '@inertiajs/vue3'
+defineOptions({
+  pageName: 'account.profile.page',
+})
 </script>
 
 <template>
-  <i-head :title="$t('account.profile.page')" />
-
   <h3>Your Profile Goes Here</h3>
 </template>
diff --git a/resources/client/pages/account/settings.vue b/resources/client/pages/account/settings.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Head as iHead } from '@inertiajs/vue3'
+defineOptions({
+  pageName: 'account.settings.page',
+})
 </script>
 
 <template>
-  <i-head :title="$t('account.settings.page')" />
-
   <h3>Your Account Settings Goes Here</h3>
 </template>
diff --git a/resources/client/pages/auth/confirm-password.vue b/resources/client/pages/auth/confirm-password.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { Head as iHead, useForm } from '@inertiajs/vue3'
+import { useForm } from '@inertiajs/vue3'
 
 defineOptions({
+  pageName: 'auth.routes.confirm-password',
   layoutName: 'guest-layout',
 })
 
@@ -25,8 +26,6 @@ function submit() {
 </script>
 
 <template>
-  <i-head :title="$t('auth.routes.confirm-password')" />
-
   <div class="mb-4 text-sm text-gray-600">
     {{ $t('auth.notices.confirm-password') }}
   </div>

diff --git a/resources/client/pages/auth/forgot-password.vue b/resources/client/pages/auth/forgot-password.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { Head as iHead, Link as iLink, useForm } from '@inertiajs/vue3'
+import { Link as iLink, useForm } from '@inertiajs/vue3'
 
 defineOptions({
+  pageName: 'auth.routes.forgot-password',
   layoutName: 'guest-layout',
 })
 
@@ -23,8 +24,6 @@ function submit() {
 </script>
 
 <template>
-  <i-head :title="$t('auth.routes.forgot-password')" />
-
   <n-alert :title="$t('auth.routes.forgot-password')" type="info">
     {{ $t('auth.notices.forgot-password') }}
   </n-alert>

diff --git a/resources/client/pages/auth/login.vue b/resources/client/pages/auth/login.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { Head as iHead, Link as iLink, useForm } from '@inertiajs/vue3'
+import { Link as iLink, useForm } from '@inertiajs/vue3'
 
 defineOptions({
+  pageName: 'auth.routes.login',
   layoutName: 'guest-layout',
 })
 
@@ -30,8 +31,6 @@ function submit() {
 </script>
 
 <template>
-  <i-head :title="$t('auth.routes.login')" />
-
   <n-form :model="model" class="form-login" @submit.prevent="submit">
     <n-form-item
       :label="$t('auth.username.label')"

diff --git a/resources/client/pages/auth/register.vue b/resources/client/pages/auth/register.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { Head as iHead, Link as iLink, useForm } from '@inertiajs/vue3'
+import { Link as iLink, useForm } from '@inertiajs/vue3'
 
 defineOptions({
+  pageName: 'auth.routes.register',
   layoutName: 'guest-layout',
 })
 
@@ -31,8 +32,6 @@ function submit() {
 </script>
 
 <template>
-  <i-head :title="$t('auth.routes.register')" />
-
   <n-form :model="model" class="form-login" @submit.prevent="submit">
     <n-form-item
       :label="$t('auth.email.label')"

diff --git a/resources/client/pages/auth/reset-password.vue b/resources/client/pages/auth/reset-password.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { Head as iHead, useForm } from '@inertiajs/vue3'
+import { useForm } from '@inertiajs/vue3'
 
 defineOptions({
+  pageName: 'auth.routes.reset-password',
   layoutName: 'guest-layout',
 })
 
@@ -31,8 +32,6 @@ function submit() {
 </script>
 
 <template>
-  <i-head :title="$t('auth.routes.reset-password')" />
-
   <n-alert :title="$t('auth.routes.reset-password')" type="info">
     {{ $t('auth.notices.forgot-password') }}
   </n-alert>

diff --git a/resources/client/pages/auth/verify-email.vue b/resources/client/pages/auth/verify-email.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { Head as iHead } from '@inertiajs/vue3'
-
 defineOptions({
+  pageName: 'auth.routes.verify-email',
   layoutName: 'guest-layout',
 })
 
@@ -11,8 +10,6 @@ function resend() {
 </script>
 
 <template>
-  <i-head :title="$t('auth.routes.verify-email')" />
-
   <n-alert :title="$t('auth.routes.verify-email')" type="info">
     {{ $t('auth.notices.verify-email') }}
   </n-alert>

diff --git a/resources/client/pages/dashboard.vue b/resources/client/pages/dashboard.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
-import { Head as iHead, usePage } from '@inertiajs/vue3'
+import { usePage } from '@inertiajs/vue3'
+
+defineOptions({
+  pageName: 'dashboard.routes.index',
+})
 
 const { props } = usePage()
+const user = props.user?.name
 </script>
 
 <template>
-  <i-head :title="$t('dashboard.routes.index')" />
-
-  <h3>{{ $t('dashboard.welcome-notice', { user: props.user?.name }) }}</h3>
+  <h3>{{ $t('dashboard.welcome-notice', { user }) }}</h3>
 
   <a :href="$route('home')">
     Home

diff --git a/resources/client/pages/supports.vue b/resources/client/pages/supports.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Head as iHead } from '@inertiajs/vue3'
+defineOptions({
+  pageName: 'account.settings.page',
+})
 </script>
 
 <template>
-  <i-head :title="$t('account.profile.page')" />
-
   <h3>Helps and Supports Goes Here</h3>
 </template>
diff --git a/resources/client/pages/test.vue b/resources/client/pages/test.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import { Head as iHead } from '@inertiajs/vue3'
 import type { NotificationType } from 'naive-ui'
 
+defineOptions({
+  pageName: 'account.settings.page',
+})
+
 const { notification } = useNaiveDiscreteApi()
 
 function notify(type: NotificationType) {
@@ -12,8 +15,6 @@ function notify(type: NotificationType) {
 </script>
 
 <template>
-  <i-head :title="$t('account.profile.page')" />
-
   <h3>Helps and Supports Goes Here</h3>
 
   <n-button @click="$message.info('test')">

diff --git a/resources/client/pages/users/forms.vue b/resources/client/pages/users/forms.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Head as iHead } from '@inertiajs/vue3'
+defineOptions({
+  pageName: 'account.settings.page',
+})
 </script>
 
 <template>
-  <i-head :title="$t('users.routes.index')" />
-
   <h3>User form goes here</h3>
 </template>
diff --git a/resources/client/pages/users/index.vue b/resources/client/pages/users/index.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Head as iHead } from '@inertiajs/vue3'
+defineOptions({
+  pageName: 'account.settings.page',
+})
 </script>
 
 <template>
-  <i-head :title="$t('users.routes.index')" />
-
   <h3>User table goes here</h3>
 </template>