refactor: explicit Inertia Head component imports

Author: connorabbas

resources/js/app.ts

@@ -2,7 +2,7 @@ import '../css/app.css'
 import '../css/tailwind.css'
 
 import { createApp, DefineComponent, h } from 'vue'
-import { createInertiaApp, router, Head, Link } from '@inertiajs/vue3'
+import { createInertiaApp, router, Link } from '@inertiajs/vue3'
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
 import { ZiggyVue } from 'ziggy-js'
 
@@ -73,7 +73,6 @@ createInertiaApp({
                 pt: globalPt,
             })
             .use(ToastService)
-            .component('InertiaHead', Head)
             .component('InertiaLink', Link)
             .component('Container', Container)
             .component('PageTitleSection', PageTitleSection)

resources/js/pages/Dashboard.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
+import { Head as InertiaHead } from '@inertiajs/vue3'
 import AppLayout from '@/layouts/AppLayout.vue'
 
 const breadcrumbs = [{ label: 'Dashboard' }]
 </script>
 
 <template>
-    <AppLayout :breadcrumbs>
-        <InertiaHead title="Dashboard" />
+    <InertiaHead title="Dashboard" />
 
+    <AppLayout :breadcrumbs>        
         <Card>
             <template #content>
                 <p class="m-0">

resources/js/pages/Error.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { Head as InertiaHead } from '@inertiajs/vue3'
 import { ArrowLeft } from 'lucide-vue-next'
 
 const props = defineProps<{
@@ -19,6 +20,7 @@ const details = computed(() => {
 
 <template>
     <InertiaHead title="Error" />
+
     <Container fluid>
         <main>
             <div class="h-screen flex items-center justify-center">

resources/js/pages/Welcome.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { usePage } from '@inertiajs/vue3'
+import { usePage, Head as InertiaHead } from '@inertiajs/vue3'
 import { LayoutGrid, LogIn, Settings, UserPlus } from 'lucide-vue-next'
 
 defineProps<{

resources/js/pages/auth/ConfirmPassword.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useForm } from '@inertiajs/vue3'
+import { useForm, Head as InertiaHead } from '@inertiajs/vue3'
 import GuestAuthLayout from '@/layouts/GuestAuthLayout.vue'
 
 const form = useForm({
@@ -16,9 +16,9 @@ const submit = () => {
 </script>
 
 <template>
-    <GuestAuthLayout>
-        <InertiaHead title="Confirm password" />
+    <InertiaHead title="Confirm password" />
 
+    <GuestAuthLayout>
         <template #title>
             <div class="text-center">
                 Confirm your password

resources/js/pages/auth/ForgotPassword.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useTemplateRef, onMounted } from 'vue'
-import { useForm } from '@inertiajs/vue3'
+import { useForm, Head as InertiaHead } from '@inertiajs/vue3'
 import GuestAuthLayout from '@/layouts/GuestAuthLayout.vue'
 import InputText from 'primevue/inputtext'
 
@@ -27,9 +27,9 @@ onMounted(() => {
 </script>
 
 <template>
-    <GuestAuthLayout>
-        <InertiaHead title="Forgot password" />
+    <InertiaHead title="Forgot password" />
 
+    <GuestAuthLayout>
         <template
             v-if="props.status"
             #message

resources/js/pages/auth/Login.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useTemplateRef, onMounted } from 'vue'
-import { useForm } from '@inertiajs/vue3'
+import { useForm, Head as InertiaHead } from '@inertiajs/vue3'
 import GuestAuthLayout from '@/layouts/GuestAuthLayout.vue'
 import InputText from 'primevue/inputtext'
 
@@ -32,9 +32,9 @@ onMounted(() => {
 </script>
 
 <template>
-    <GuestAuthLayout>
-        <InertiaHead title="Log in" />
+    <InertiaHead title="Log in" />
 
+    <GuestAuthLayout>
         <template
             v-if="props.status"
             #message

resources/js/pages/auth/Register.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useTemplateRef, onMounted } from 'vue'
-import { useForm } from '@inertiajs/vue3'
+import { useForm, Head as InertiaHead } from '@inertiajs/vue3'
 import GuestAuthLayout from '@/layouts/GuestAuthLayout.vue'
 import InputText from 'primevue/inputtext'
 
@@ -28,9 +28,9 @@ onMounted(() => {
 </script>
 
 <template>
-    <GuestAuthLayout>
-        <InertiaHead title="Register" />
+    <InertiaHead title="Register" />
 
+    <GuestAuthLayout>
         <template #title>
             <div class="text-center">
                 Create an account

resources/js/pages/auth/ResetPassword.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useTemplateRef, onMounted } from 'vue'
-import { useForm } from '@inertiajs/vue3'
+import { useForm, Head as InertiaHead } from '@inertiajs/vue3'
 import GuestAuthLayout from '@/layouts/GuestAuthLayout.vue'
 import InputText from 'primevue/inputtext'
 
@@ -33,9 +33,9 @@ onMounted(() => {
 </script>
 
 <template>
-    <GuestAuthLayout>
-        <InertiaHead title="Reset password" />
+    <InertiaHead title="Reset password" />
 
+    <GuestAuthLayout>
         <template #title>
             <div class="text-center">
                 Reset password

resources/js/pages/auth/VerifyEmail.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useForm } from '@inertiajs/vue3'
+import { useForm, Head as InertiaHead } from '@inertiajs/vue3'
 import GuestAuthLayout from '@/layouts/GuestAuthLayout.vue'
 
 const props = defineProps<{
@@ -20,9 +20,9 @@ const verificationLinkSent = computed(() => props.status === 'verification-link-
 </script>
 
 <template>
-    <GuestAuthLayout>
-        <InertiaHead title="Email verification" />
+    <InertiaHead title="Email verification" />
 
+    <GuestAuthLayout>
         <template #title>
             <div class="text-center">
                 Verify email