No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

1D
18H
48M
44S

Vista detalle de nota

10/20
Recursos

Aportes 13

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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,