Vista detalle de nota

Para la versión con vue3 fue necesario usar los link de la siguiente manera:

Uhhh eso me faltó mencionarlo, todo lo que está en Vue es código JavaSript, es por eso que accedemos a través de un “.” en lugar de una flechita de PHP.
.
Lo genial es que aquí podemos empezar a usar propiedades computadas, métodos y demás 👀
.
La forma en la que yo creo que trabaja es que realmente no estamos usando el sistema de rutas de Laravel, es decir, se usa ese sistema de rutas únicamente cuando accedemos por primera vez al sitio web, donde Laravel tiene que decidir cuál ruta mostrar, pero ya después de eso, Laravel le pasa su sistema de rutas a Vue a través de la librería tightengo/ziggy y es el sistema de rutas de Vue el que se encarga de ir mostrando las demás rutas, en Vue normal, un enlace se llamaría <route-link> jaja, de hecho sí podemos usar un elemento <a>, pero estaríamos desaprovechando a Vue porque un elemento <a> recargaría la página.

Como bien menciona Nelson, a principios del 2021 se removieron los componentes <inertia-link> e <inertia-head>, tal como lo explican en su sitio web:
https://inertiajs.com/releases/inertia-vue3-0.5.0-2021-07-13

Adicional a la solución propuesta por Nelson, también se pueden registrar de manera global en app.js para evitar importarlos en cada archivo.vue.

import { Head, Link } from '@inertiajs/inertia-vue3'

createInertiaApp({
  // ...
  setup({ el, App, props, plugin }) {
    createApp({
      render: () => h(App, props),
    })
      .use(plugin)
      .component('InertiaHead', Head)
      .component('InertiaLink', Link)
      .mount(el)
  },
})

En mi caso, yo únicamente agregué al app.js el import nuevo que se indica acá
inertia vue3

require('./bootstrap');

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { Head, Link } from '@inertiajs/inertia-vue3'

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .component('InertiaHead', Head)
            .component('InertiaLink', Link)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

InertiaProgress.init({ color: '#4B5563' });

mantuve los tags de :

 <inertia-link :href="route('notes.edit', note.id)">   Editar  </inertia-link>

Este es el código del archivo de Vue

<template>
    <app-layout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Módulo de Notas
            </h2>
        </template>
        
        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="md:grid md:grid-cols-3 md:gap-6">
                    <div class="md:col-span-1">
                        <div class="p3-4 sm:px0">
                            <h3 class="text-lg text-gray-900">Detalle de una nota</h3>
                            <p class="text-sm text-gray-600">{{ note.excerpt }}</p>
                        </div>
                    </div>
                    <div class="md:col-span-2 mt-5 md:mt-0">
                        <div class="shadow bg-white md:roundend-md p-4">
                            <p>{{ note.content }}</p>
                            <hr class="my-6">
                            <inertia-link :href="route('notes.index')">
                                Volver
                            </inertia-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </app-layout>
</template>

<script>
    import AppLayout from '@/Layouts/AppLayout'
    import Welcome from '@/Jetstream/Welcome'

    export default {
        components: {
            AppLayout,
            Welcome,
        },
        props: {
            note: Object
        }
    }
</script>

Me ha gustado la forma en que ayuda Inertia, trabajamos con Vue sin tener que crear APIs.

Codigo de show.vue con laravel 9 y Vue3

<script setup>
    import AppLayout from '@/Layouts/AppLayout.vue';
    import {Link} from '@inertiajs/inertia-vue3';
    import { useForm } from '@inertiajs/inertia-vue3'
    const props=defineProps({note: Object});
</script>

<template>
    <AppLayout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Modulo de Notas
            </h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="md:grid md:grid-cols-3 md:gap-6">
                    <div class="md:col-span-1">
                        <div class="px-4 sm:px0">
                            <h3 class="text-lg text-gray-900">Detalle de una nota</h3>
                            <p class="text-sm text-gray-600">{{ note.excerpt }}</p>
                        </div>
                    </div>
                    <div class="md:col-span-2 mt-5 md:mt-0">
                        <div class="shadow bg-white md:rounded-md p-4">
                            <p>{{ note.content }}</p>

                            <hr class="my-6">

                            <Link :href="route('notes.index')">
                                Volver
                            </Link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </AppLayout>
</template>

En Vue 3, inertia no tiene <intertia-link> sino que utiliza un componente de Inertia llamado LInk. Para utilizarlo se debe importar el componente y renderizarlo de la siguiente manera:

import {Link} from "@inertiajs/inertia-vue3";

<Link :href="route('notes.show',note.id)">
      Ver
</Link>

Dejo mi commit con Laravel 9 y vue 3:

https://github.com/jlbousing/platzi-inertia/commit/8a4d1f99b7101be823b981ecdf245207938d1508

En Inertia con Vue 3 tambien se pueden construir componentes de vue de manera normal, como lo hace Italo. Sin embargo, las vistas que trae Jetstream como Welcome utilizan funciones que me confundieron ya que declaran los props de otra manera (como lo puse en la clase pasada).

Excelente me esta copando Vue

En laravel 8 y vue 3 va así

<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import {Link} from '@inertiajs/inertia-vue3';
defineProps({notes: Array});
</script>

y el link así

 <Link :href="route('notes.show', note.id)">Ver</Link> 

Tengan cuidado con las clases, escribí mal algunas y directamente no me cargaba la página, tuve que copiar un código que dejaron en comentarios

compañeros, alguno sabe de un ejemplo si son varias tablas y estan relacionadas,