Listado de notas: configuración inicial

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

María Sierra

student•

Me está encantando Vue.js! Nunca lo había probado

Andrés Felipe Lopez gomez

student•

Si a mi tambien

Eddy Herrera Vargas

student•

También podemos usar el método compact() para enviar datos desde el controlador; haciendo de esta forma más legible el código.

class NoteController extends Controller
{
    public function index()
    {
        $notes = Note::latest()->get();
        return Inertia::render('Notes/Index', compact('notes'));
    }
}

Jose Miguel Nieves

student•

Gracias, vengo de usar laravel con livewire y habia probado enviarlo pero habia olvidado el compact y no me funcionaba jajajaja

Manuel Felipe Alzate Salazar

student•

Se ve más estético así, muchas gracias. Estaba pensando si se debía usar un método diferente para hacer dicho envío. También venía de usar livewire.

Gonzalo Garcia Ariño

student•

Para ver los cambios en google chrome ademas de obviamente estar ejecutando npm run watch, tuve que ingresar en una pestaña de incognito, calculo que es porque la pagina me queda en cache de la pc. estoy usando un servidor de paginas web muy bueno llamado Laragon lo recomiendo sobre XAMPP, es muy practico, tiene autohosting de varias paginas simplemente soltando la carpeta dentro con direcciones de acceso lindas usando de base el nombre de la carpeta, si una de las carpetas se llama "laravel" en el navegador ingresas "laravel.test" , también te deja cambiar fácilmente de versión de php.

Juan Diego Bautista Valderram

student•

A mi me esta sucediendo con Firefox, tengo que borrar caché para qur tome los cambios.

VICTOR M. RUBIO C

student•

Si usas ctrl + shift + R, recarga sin cache

Carlos Eduardo Gomez García

teacher•

Ahhh que hermoso es ver a Vue funcionando con Laravel jaja, es decir, el hecho de que puedas cambiar entre secciones sin que se recargue lla página. . Ahora lo que se me hace curioso es el cómo funciona, es decir, me imagino que Laravel le pasa su sistema de rutas a Vue... oh estaba revisando las dependencia y veo que están usando la dependencia tightenco/ziggy, esta dependencia yo la usaba mucho para pasar mis rutas de Laravel a mi front, así que efectivamente Laravel le está pasando las rutas a Vue OwO, seguramente Vue usa su sistema de rutas interno para tener conocimiento de las rutas de Laravel y renderizar las vistas necesarias

Brian Sánchez Izquierdo

student•

Asombroso como puedes volver responsive una página con solo DOS LETRAS, un aplauso a TailWind CSS 🙌

Jimmy Buriticá Londoño

student•

Me gusta ver funcionar Laravel y Vue juntos.

Fredy Max Chavez Loyola

student•

Para que sus Components se autocompleten cuando hacen

import NameComponent from "@/path/to/component";

Deben crear una archivo en la raiz de completo que se llame jsconfig.json y en dicho archivo debe ir esto

{
    "compilerOptions": {
        "paths": {
            "@/*" : ["./resources/js/*"]
        }
    },
    "include": ["./resources/js"]
}

Miguel Bonifaz

student•

Les recomiendo usar este comando para que la pagina se actualice sin recargar, a mi me ha funcionado muy bien hasta ahora 😄

mix watch --hot

Cristobal Nyram

student•

osea como?

Jorge Bou-saad

student•

Dejo mi commit de esta clase con Laravel 9

https://github.com/jlbousing/platzi-inertia/commit/7636cda6a23088220e7494d60f2cbb9c6811e116

Gamaliel Matias Canales Betes

student•

aaa como me molesta que este tan trabado el video jsajajsd. igual pedazo de curso

Francisco Javier Cervantes Candelario

student•

Estoy impresionado :O es super fácil.

RAYMUNDO ISAU CHAVEZ QUINTANA

student•

En mi caso además de usar npm run watch tuve que deshabilitar el cache para ver los cambios. Inspeccionar>Network>Disable cache

diego andres guzman

student•

Se puede correr un escuchador para compilacion y recarga automatica con el script hot

Cristobal Nyram

student•

Hola, diego, que es un escuchador, me causa duda

Listado de notas: configuración inicial

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