Vista detalle de nota

Clase 10 de 20 • Curso de Single Page Applications en Laravel con Inertia y Vue.js

Clase anteriorSiguiente clase

Nelson Stevens Boada Muñoz

student•

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

Omar Guillermo Gamarra Ureta

student•

Gracias!!! por el dato.

André Escobar

student•

Grande Nelson, no sabes como me estaba rompiendo la cabeza. Muchas gracias.

Carlos Eduardo Gomez García

teacher•

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.

Ernesto Alejandro Muñoz Contreras

student•

Si yo creo lo mismo, yo e usado tightengo/ziggy pero lo usaba con un comando para crear un archivo llamado routes.js y ese archivo lo metia en el app.js para tener nuestras rutas en Vue , inertia llego a resolver de una mejor manera ese problema.

Francisco Torales Romero

student•

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)
  },
})

Alexander Agrazal

student•

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>

Mauricio Poveda Macias

student•

adicional se reemplaza inertia-link por Link

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

Lucia Aura Mendez Martinez

student•

Yo seguí los pasos para el app.js, pero en la vista utilizaba la etiqueta

<Link></Link>

Y no me mostraba la información. Pero usando

<inertia-link></inertia-link>

Me funciona!! Muchas gracias(:

María Sierra

student•

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
            </h3>
        </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</h4>
                            <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>

Jimmy Buriticá Londoño

student•

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

Añaqui Apolinar Morales

student•

Tengo una duda sobre el enlace de Inertia? Como reconoce vue esa etiqueta como un href ?

Osmell Caicedo

student•

Es un elemento registrado en vue js automaticamente por el paquete de inertia.

Brian Sánchez Izquierdo

student•

Alguna idea de como implementar la función diffForHumans sobre la fecha de creación/actualización del registro?

Kenneth Angulo L

student•

Lo mas rapido es que definas un Accessor dentro del modelo.

Arnaldo Reyes

student•

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
            </h3>
        </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</h4>
                            <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>

Jorge Bou-saad

student•

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>

Gustavo Martínez

student•

En Vue 3 yo tuve que configurar los links de esta forma:

<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import {Link} from "@inertiajs/vue3";

defineProps({
    note: Object
})
</script>

Jorge Bou-saad

student•

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).

Franyer Daniel Lopez Jimenez

student•

Tengo un problema, estoy usando Laravel 9 y vue en un docker, cuando armo el link de show esta perfecto pero al darle click y llegar a la vista no carga la informacion de la nota HELP :S

Remberto Alvaro Molina Colodro

student•

Excelente me esta copando Vue

Diego Dominguez

student•

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>

Leonel Moyano

student•

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

Francisco Hernandez

student•

Cuando no te carga la pagina puedes darle f12 (Chrome) y revisar los errores en consola.

Emilio Vega

student•

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

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)
  },
})

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' });

<template>
    <app-layout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Módulo de Notas
            </h3>
        </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</h4>
                            <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>

<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
            </h3>
        </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</h4>
                            <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>

Vista detalle de nota

Introducción

Cómo aprenderás a crear SPAs en Laravel

Introducción a Jetstream

Proyecto

Conoce qué SPA vas a construir

Configuración inicial

Sistema basado en componentes

Jetstream: configuración inicial

Jetstream: personalización

Listado de notas: configuración inicial

Listado de notas: personalización

Vista detalle de nota

Formulario de editar

Código de actualizar

Formulario de crear

Código de guardar

Función de eliminar

Flash message

Buscador

Conclusión

Repaso final

Despedida

Clase bonus: nunca parar de aprender