[Inertia] Update <Link> tags & implement <Head> management (title tag) (

#90) * Update minimal Inertia versions * Fix: `InertiaLink` -> `Link` * Implement <Head> management for the Title tag * Apply fixes from StyleCI * Update ConfirmPassword.js * Update ForgotPassword.js * Update Login.js * Update Register.js * Update ResetPassword.js * Update VerifyEmail.js * Update Dashboard.js * Update app.js * Update ConfirmPassword.vue * Update ForgotPassword.vue * Update Login.vue * Update Register.vue * Update ResetPassword.vue * Update VerifyEmail.vue * Update Dashboard.vue * Update Welcome.vue * Update app.js Co-authored-by: Taylor Otwell <taylorotwell@users.noreply.github.com> Co-authored-by: Taylor Otwell <taylor@laravel.com>
laravel · Jul 20, 2021 · b1281f3 · b1281f3
1 parent 4701fb8
commit b1281f3
Show file tree

Hide file tree

Showing 36 changed files with 638 additions and 555 deletions.
diff --git a/src/Console/InstallCommand.php b/src/Console/InstallCommand.php
@@ -105,14 +105,14 @@ public function handle()
     protected function installInertiaVueStack()
     {
         // Install Inertia...
-        $this->requireComposerPackages('inertiajs/inertia-laravel:^0.4.1', 'laravel/sanctum:^2.6', 'tightenco/ziggy:^1.0');
+        $this->requireComposerPackages('inertiajs/inertia-laravel:^0.4.3', 'laravel/sanctum:^2.6', 'tightenco/ziggy:^1.0');
 
         // NPM Packages...
         $this->updateNodePackages(function ($packages) {
             return [
-                '@inertiajs/inertia' => '^0.9.0',
-                '@inertiajs/inertia-vue3' => '^0.4.0',
-                '@inertiajs/progress' => '^0.2.4',
+                '@inertiajs/inertia' => '^0.10.0',
+                '@inertiajs/inertia-vue3' => '^0.5.1',
+                '@inertiajs/progress' => '^0.2.6',
                 '@tailwindcss/forms' => '^0.2.1',
                 '@vue/compiler-sfc' => '^3.0.5',
                 'autoprefixer' => '^10.2.4',

diff --git a/stubs/inertia-common/resources/views/app.blade.php b/stubs/inertia-common/resources/views/app.blade.php
@@ -5,7 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="csrf-token" content="{{ csrf_token() }}">
 
-        <title>{{ config('app.name', 'Laravel') }}</title>
+        <title inertia>{{ config('app.name', 'Laravel') }}</title>
 
         <!-- Fonts -->
         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

diff --git a/stubs/inertia-react/resources/js/Components/Dropdown.js b/stubs/inertia-react/resources/js/Components/Dropdown.js
@@ -1,5 +1,5 @@
 import React, { useState, useContext } from 'react';
-import { InertiaLink } from '@inertiajs/inertia-react';
+import { Link } from '@inertiajs/inertia-react';
 import { Transition } from '@headlessui/react';
 
 const DropDownContext = React.createContext();
@@ -75,14 +75,14 @@ const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-whit
 
 const Link = ({ href, method = 'post', as = 'a', children }) => {
     return (
-        <InertiaLink
+        <Link
             href={href}
             method={method}
             as={as}
             className="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
         >
             {children}
-        </InertiaLink>
+        </Link>
     );
 };
 

diff --git a/stubs/inertia-react/resources/js/Components/NavLink.js b/stubs/inertia-react/resources/js/Components/NavLink.js
@@ -1,9 +1,9 @@
-import { InertiaLink } from '@inertiajs/inertia-react';
 import React from 'react';
+import { Link } from '@inertiajs/inertia-react';
 
 export default function NavLink({ href, active, children }) {
     return (
-        <InertiaLink
+        <Link
             href={href}
             className={
                 active
@@ -12,6 +12,6 @@ export default function NavLink({ href, active, children }) {
             }
         >
             {children}
-        </InertiaLink>
+        </Link>
     );
 }
diff --git a/stubs/inertia-react/resources/js/Components/ResponsiveNavLink.js b/stubs/inertia-react/resources/js/Components/ResponsiveNavLink.js
@@ -1,9 +1,9 @@
-import { InertiaLink } from '@inertiajs/inertia-react';
 import React from 'react';
+import { Link } from '@inertiajs/inertia-react';
 
 export default function ResponsiveNavLink({ method = 'get', as = 'a', href, active = false, children }) {
     return (
-        <InertiaLink
+        <Link
             method={method}
             as={as}
             href={href}
@@ -14,6 +14,6 @@ export default function ResponsiveNavLink({ method = 'get', as = 'a', href, acti
             } text-base font-medium focus:outline-none transition duration-150 ease-in-out`}
         >
             {children}
-        </InertiaLink>
+        </Link>
     );
 }
diff --git a/stubs/inertia-react/resources/js/Layouts/Authenticated.js b/stubs/inertia-react/resources/js/Layouts/Authenticated.js
@@ -1,9 +1,9 @@
-import ApplicationLogo from '../Components/ApplicationLogo';
-import Dropdown from '../Components/Dropdown';
-import NavLink from '../Components/NavLink';
 import React, { useState } from 'react';
-import ResponsiveNavLink from '../Components/ResponsiveNavLink';
-import { InertiaLink } from '@inertiajs/inertia-react';
+import { Link } from '@inertiajs/inertia-react';
+import ApplicationLogo from '@/Components/ApplicationLogo';
+import Dropdown from '@/Components/Dropdown';
+import NavLink from '@/Components/NavLink';
+import ResponsiveNavLink from '@/Components/ResponsiveNavLink';
 
 export default function Authenticated({ auth, header, children }) {
     const [showingNavigationDropdown, setShowingNavigationDropdown] = useState(false);
@@ -15,9 +15,9 @@ export default function Authenticated({ auth, header, children }) {
                     <div className="flex justify-between h-16">
                         <div className="flex">
                             <div className="flex-shrink-0 flex items-center">
-                                <InertiaLink href="/">
+                                <Link href="/">
                                     <ApplicationLogo className="block h-9 w-auto text-gray-500" />
-                                </InertiaLink>
+                                </Link>
                             </div>
 
                             <div className="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">

diff --git a/stubs/inertia-react/resources/js/Layouts/Guest.js b/stubs/inertia-react/resources/js/Layouts/Guest.js
@@ -1,14 +1,14 @@
-import ApplicationLogo from '../Components/ApplicationLogo';
 import React from 'react';
-import { InertiaLink } from '@inertiajs/inertia-react';
+import { Link } from '@inertiajs/inertia-react';
+import ApplicationLogo from '@/Components/ApplicationLogo';
 
 export default function Guest({ children }) {
     return (
         <div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
             <div>
-                <InertiaLink href="/">
+                <Link href="/">
                     <ApplicationLogo className="w-20 h-20 fill-current text-gray-500" />
-                </InertiaLink>
+                </Link>
             </div>
 
             <div className="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">

diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.js b/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.js
@@ -1,10 +1,10 @@
-import Button from '@/Components/Button';
+import React, { useEffect } from 'react';
+import { Head, useForm } from '@inertiajs/inertia-react';
 import Guest from '@/Layouts/Guest';
+import Button from '@/Components/Button';
 import Input from '@/Components/Input';
 import Label from '@/Components/Label';
-import React, { useEffect } from 'react';
 import ValidationErrors from '@/Components/ValidationErrors';
-import { useForm } from '@inertiajs/inertia-react';
 
 export default function ConfirmPassword() {
     const { data, setData, post, processing, errors, reset } = useForm({
@@ -29,6 +29,8 @@ export default function ConfirmPassword() {
 
     return (
         <Guest>
+            <Head title="Secure Area" />
+
             <div className="mb-4 text-sm text-gray-600">
                 This is a secure area of the application. Please confirm your password before continuing.
             </div>

diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js b/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js
@@ -1,9 +1,9 @@
-import Button from '@/Components/Button';
+import React from 'react';
+import { Head, useForm } from '@inertiajs/inertia-react';
 import Guest from '@/Layouts/Guest';
+import Button from '@/Components/Button';
 import Input from '@/Components/Input';
-import React from 'react';
 import ValidationErrors from '@/Components/ValidationErrors';
-import { useForm } from '@inertiajs/inertia-react';
 
 export default function ForgotPassword({ status }) {
     const { data, setData, post, processing, errors } = useForm({
@@ -22,6 +22,8 @@ export default function ForgotPassword({ status }) {
 
     return (
         <Guest>
+            <Head title="Forgot Password" />
+
             <div className="mb-4 text-sm text-gray-500 leading-normal">
                 Forgot your password? No problem. Just let us know your email address and we will email you a password
                 reset link that will allow you to choose a new one.

diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Login.js b/stubs/inertia-react/resources/js/Pages/Auth/Login.js
@@ -1,12 +1,11 @@
+import React, { useEffect } from 'react';
+import { Head, Link, useForm } from '@inertiajs/inertia-react';
+import Guest from '@/Layouts/Guest';
 import Button from '@/Components/Button';
 import Checkbox from '@/Components/Checkbox';
-import Guest from '@/Layouts/Guest';
 import Input from '@/Components/Input';
 import Label from '@/Components/Label';
-import React, { useEffect } from 'react';
 import ValidationErrors from '@/Components/ValidationErrors';
-import { InertiaLink } from '@inertiajs/inertia-react';
-import { useForm } from '@inertiajs/inertia-react';
 
 export default function Login({ status, canResetPassword }) {
     const { data, setData, post, processing, errors, reset } = useForm({
@@ -33,6 +32,8 @@ export default function Login({ status, canResetPassword }) {
 
     return (
         <Guest>
+            <Head title="Log in" />
+
             {status && <div className="mb-4 font-medium text-sm text-green-600">{status}</div>}
 
             <ValidationErrors errors={errors} />
@@ -75,12 +76,12 @@ export default function Login({ status, canResetPassword }) {
 
                 <div className="flex items-center justify-end mt-4">
                     {canResetPassword && (
-                        <InertiaLink
+                        <Link
                             href={route('password.request')}
                             className="underline text-sm text-gray-600 hover:text-gray-900"
                         >
                             Forgot your password?
-                        </InertiaLink>
+                        </Link>
                     )}
 
                     <Button className="ml-4" processing={processing}>

diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Register.js b/stubs/inertia-react/resources/js/Pages/Auth/Register.js
@@ -1,11 +1,10 @@
-import Button from '@/Components/Button';
+import React, { useEffect } from 'react';
+import { Head, Link, useForm } from '@inertiajs/inertia-react';
 import Guest from '@/Layouts/Guest';
+import Button from '@/Components/Button';
 import Input from '@/Components/Input';
 import Label from '@/Components/Label';
-import React, { useEffect } from 'react';
 import ValidationErrors from '@/Components/ValidationErrors';
-import { InertiaLink } from '@inertiajs/inertia-react';
-import { useForm } from '@inertiajs/inertia-react';
 
 export default function Register() {
     const { data, setData, post, processing, errors, reset } = useForm({
@@ -33,6 +32,8 @@ export default function Register() {
 
     return (
         <Guest>
+            <Head title="Register" />
+
             <ValidationErrors errors={errors} />
 
             <form onSubmit={submit}>
@@ -93,9 +94,9 @@ export default function Register() {
                 </div>
 
                 <div className="flex items-center justify-end mt-4">
-                    <InertiaLink href={route('login')} className="underline text-sm text-gray-600 hover:text-gray-900">
+                    <Link href={route('login')} className="underline text-sm text-gray-600 hover:text-gray-900">
                         Already registered?
-                    </InertiaLink>
+                    </Link>
 
                     <Button className="ml-4" processing={processing}>
                         Register

diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.js b/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.js
@@ -1,10 +1,10 @@
-import Button from '@/Components/Button';
+import React, { useEffect } from 'react';
+import { Head, useForm } from '@inertiajs/inertia-react';
 import Guest from '@/Layouts/Guest';
+import Button from '@/Components/Button';
 import Input from '@/Components/Input';
 import Label from '@/Components/Label';
-import React, { useEffect } from 'react';
 import ValidationErrors from '@/Components/ValidationErrors';
-import { useForm } from '@inertiajs/inertia-react';
 
 export default function ResetPassword({ token, email }) {
     const { data, setData, post, processing, errors, reset } = useForm({
@@ -32,6 +32,8 @@ export default function ResetPassword({ token, email }) {
 
     return (
         <Guest>
+            <Head title="Reset Password" />
+
             <ValidationErrors errors={errors} />
 
             <form onSubmit={submit}>

diff --git a/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js
@@ -1,8 +1,7 @@
-import Button from '@/Components/Button';
-import Guest from '@/Layouts/Guest';
+import { Head, Link, useForm } from '@inertiajs/inertia-react';
 import React from 'react';
-import { InertiaLink } from '@inertiajs/inertia-react';
-import { useForm } from '@inertiajs/inertia-react';
+import Guest from '@/Layouts/Guest';
+import Button from '@/Components/Button';
 
 export default function VerifyEmail({ status }) {
     const { post, processing } = useForm();
@@ -15,6 +14,8 @@ export default function VerifyEmail({ status }) {
 
     return (
         <Guest>
+            <Head title="Email Verification" />
+
             <div className="mb-4 text-sm text-gray-600">
                 Thanks for signing up! Before getting started, could you verify your email address by clicking on the
                 link we just emailed to you? If you didn't receive the email, we will gladly send you another.
@@ -30,14 +31,14 @@ export default function VerifyEmail({ status }) {
                 <div className="mt-4 flex items-center justify-between">
                     <Button processing={processing}>Resend Verification Email</Button>
 
-                    <InertiaLink
+                    <Link
                         href={route('logout')}
                         method="post"
                         as="button"
                         className="underline text-sm text-gray-600 hover:text-gray-900"
                     >
                         Log Out
-                    </InertiaLink>
+                    </Link>
                 </div>
             </form>
         </Guest>

diff --git a/stubs/inertia-react/resources/js/Pages/Dashboard.js b/stubs/inertia-react/resources/js/Pages/Dashboard.js
@@ -1,5 +1,6 @@
-import Authenticated from '@/Layouts/Authenticated';
 import React from 'react';
+import { Head } from '@inertiajs/inertia-react';
+import Authenticated from '@/Layouts/Authenticated';
 
 export default function Dashboard(props) {
     return (
@@ -8,6 +9,8 @@ export default function Dashboard(props) {
             errors={props.errors}
             header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">Dashboard</h2>}
         >
+            <Head title="Dashboard" />
+
             <div className="py-12">
                 <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                     <div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">