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.

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,