Jetstream: personalización

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

Carlos Eduardo Gomez García

teacher•

Fun fact: Cuando empecé a trabajar con Laravel Mix y Vue, noté que efectivamente la compilación de los assets tardaba demasiado en la computadora que tenía en el trabajo (una mac), así que llamé a mi jefe y le dije: "Mira, esto se está tardando demasiado en compilar" así que le puse un cronómetro desde que inició hasta que terminó de compilar, casi un minuto, y le dije: "Esto tengo que hacerlo por cada cambio, ¿sabes lo que es eso?", en resumen, al final acabé pidiendo un PC potente con un i7 de 10° generación jajaja ahora ese compilado tarda aproximadamente 10 segundos uwu

Tony Manuel Ojeda Vela

student•

Un disco solido también ayuda

Enrique Gamboa

student•

Tips para la vida jajaja

María Sierra

student•

Jetstream: personalización

Un plugin para manejar JS en Visual Studio Code.

Jimmy Buriticá Londoño

student•

Lo instalé y funciona muy bien, gracias.

Omar Villafuerte

student•

funciona perfecto, gracias!

Jorge Bou-saad

student•

En Laravel 9 ya no se utiliza Laravel Mix, se utiliza Vite. Aqui tienen mas informacion al respecto https://laravel.com/docs/9.x/vite

los cambios con Vite son automaticos, solo deben leventar el servidor de vite con npm run dev y compilan todos los archivos. Ya el flag --watch no es necesario, por defecto con npm run dev ya queda en escucha el servidor de Vite.

Cristobal Nyram

student•

en el curso,se esta usando laravel 8, el profesor lo aclara en el curso

Manuel Ojeda

student•

Para quienes al día de hoy: 16 de febrero de 2021 en adelante ven este curso necesitaran instalar esta extensión pues Laravel Jetstream instala Vue 3 en lugar de Vue 2.

No olvides tomar el curso de Vue 3

Nelson Junior Moncada Pirela

student•

Todos los videos de este curso están súper lag

Cristobal Nyram

student•

super lag?

Santiago Velásquez Serna

student•

A la fecha marzo de 2024 ya trabajamos directamente con vite y vamos en laravel 11. El renderizado practicamente no demora y con el npm run dev es suficiente para que el sistema siga escuchando los cambios.

Mauricio Acevedo Rueda

student•

Laravel 9, problemas hasta el momento en Ubuntu, verificar la versión de node(tenía la 12, subí a 18), necesitas correr al tiempo

php artisan serve 
npm run dev

Jairo Niño

student•

Ojo, si creas un nuevo enlace en el componente AppLayout haciendo referencia a una ruta que apunta a un controlador que no está renderizando un componente de Vue (por medio de Inertia::render('Notes')) te va a salir un "modal", esto desde luego no es el resultado esperado y la forma de solventarlo es creando el componente y renderizándolo desde el método del controlador asociado con la ruta. Espero esto sirva de algo. Saludos 🫶

Brian Sánchez Izquierdo

student•

Necesitaremos trabajar con un Portatil o PC decente si queremos correr watch.

Luis Humberto Osorio Quiceno

student•

Un saludo. Estoy con Laravel 9, Vue 3 y Vite Cuando corro php artisan serve me carga, sin cambios. Cuando corro npm run dev, me carga sin cambios. Cuando correo pnm run watch no hace nada, no lo tengo configurado.

No logro entender como hacer para que funcione con los cambios. Una manita, please!!!

Gracias.

Kenneth Angulo L

student•

En L9 cuando se ejecuta

npm run dev

se llama a los scripts de vite y estos compilan y se quedan en modo watch para atender a los cambios que hagas, esto esta configurado en: package.json

    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },

y el archivo de configuracion se vite, vite.config.json debe tener indicado que como entrada chekea la carpeta resources/js y eso es lo que re-compila cada vez que hagas cambios:

    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],

Todas estas configuraciones vienen por defecto con la instalaciondel ambiente de trabajo con jetstream. . Si esto no esta funcionando correctamente o si tienes algun otro mensaje de error, favor compartelo por aqui. . Me inclino por pensar que tengas algun problema con la version del NPM o de node.js, recomiendo actualizar ambas herramientas y ejecutes de nuevo

npm install  

y luego 

npm run dev

David Quelal

student•

a alguien más le pasa que cuando agrega el link de "Notas" se le coloca todo en blanco?

Kenneth Angulo L

student•

La pagina queda en blanco ? . Creo que puedas tener algun problema con una etiqueta de cierre que ocacione que el archivo.vue se rompa y no pueda ser compilado. . Chekea que el helpepr route() este apuntando a una ruta que exista realmente.

Bryan Ramon Useche Tapias

student•

en las nuevas versiones de Laravel el comando npm run watch fue eliminado, solo basta que ejecutes npm run dev y ya los cambios los verias en vivo en la aplicacion

Eduardo José Bastos

student•

Si estás usando la versión de Laravel 10.x notarás que ya estamos usando vite en lugar de webpack. Para poder usar el comando en esta clase "npm run watch" es necesario ir al archivo package.js y agregar la siguiente línea:

"scripts": { "dev": "vite", "build": "vite build", ``"watch": "vite build --watch" },

Jorge Bou-saad

student•

Dejo mi commit con Laravel 9:

https://github.com/jlbousing/platzi-inertia/commit/261e60e7c00df947017c846fc2553edfd4e5cce9

Jorge Bou-saad

student•

En Laravel 9, el comando watch ya no esta includo en el package.json. En su lugar esta dev

Celso Ccoropuna Salas

student•

En Vue como puedo utilizar las funcion "asset" de laravel. Para hacer referencia a mis archivos de /public

Kenneth Angulo L

student•

Esto es un poco truculento porque asset era un helper de blade y vue no tiene disponible dicho helper. Se que existen librerias que permiten habilitar una funcion asset como la de blade, pero su configuracion es tediosa. .

La solucion rapida y practica que te puedo dar es esta:: cuando llames la vista desde el controlador, pasa la ruta de tu asset asi (la imagen debe estar en la carpeta publica):

		return Inertia::render('index', [
			'logo' =>  '/images/mi-logo.png',
		]);

La pagina del componente, index.vue debe recibir esa prop en su encabezado asi:

<script setup>
import { Head, Link } from '@inertiajs/inertia-vue3';

defineProps({
	logo: String,
});
</script>

con esto ya tienes acceso al ++asset++, desde tu componente, de esta manera:

<img :src="logo" class="mis-clases-de-tailwind"/>

Fernando Dodero

student•

Hola a todos, necesito ayuda con algo, no logro que haga la compilación y muestre los cambios, realicé las modificaciones explicadas por el profesor y si bien al correr npm run watch me dice que compila satisfactoriamente, los cambios no se ven reflejados (no aparece el menu "Notas" ni el cuerpo del "Dashboard" vacio. Gracias de antemano por la ayuda!! (no se mucho de webpack y tal vez haya que configurar algo diferente)

Carlos Eduardo Gomez García

teacher•

¡Hola!, podrías probar cerrando el watch y volviéndolo a ejecutar, también recarga la página con ctrl + f5 para borrar caché, recuerda guardar tus archivos, debería funcionar 🤔

Fernando Dodero

student•

Gracias por la respuesta, probé con crl+F5 y ahora no me renderiza "Dashboard" y me arroja este error:

warn @ app.js:5609 dashboard:20 Uncaught (in promise) Error: Ziggy error: route 'note.index' is not in the route list. at new N (dashboard:20) at Proxy.<anonymous> (dashboard:20) at Proxy.render (app.js:19623) at renderComponentRoot (app.js:6300) at componentEffect (app.js:9784) at reactiveEffect (app.js:4644) at effect (app.js:4619) at setupRenderEffect (app.js:9767) at mountComponent (app.js:9726) at processComponent (app.js:9686)

Brian Sánchez Izquierdo

student•

sería buena idea ignorar el archivo public/js/app.js desde el .gitignore? Lo digo por que si se puede compilar no tendría mucho sentido trackear sus cambios, no?

Carlos Eduardo Gomez García

teacher•

La idea es que en producción NO tengas que instalar las herramientas de desarrollador, de hecho, no deberías instalar las herramientas de desarrollador en producción. Por ese motivo no es buena idea ignorar tal archivo, recuerda que el compilar todos los cambios y demás hace parte de las herramientas de desarrollador (igual por eso dentro del composer.json y el package.json) tenemos opciones para instalar herrmientas de desarrollo y producción :D

Brian Sánchez Izquierdo

student•

Ya veo, muchas gracias. Personalmente lo ignorare ya que estaba leyendo que TailwindCSS tiene capacidad de comprimir su compilado en producción.

Jose Alejandro Gonzalez Rondon

student•

No me queda porque la ruta la debo acompañar por el .index ):

Juan David Gonzalez Revelo

student•

Al crear las rutas de recursos:

`Route::resource('notes', App\Http\Controllers\NoteController::class);

Laravel crea automaticamente las 7 rutas básicas de un CRUD y usa esta convención para nombrarlas.

notes.index
notes.create
notes.store
notes.show
notes.edit
notes.update
notes.destroy

    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],

Jetstream: personalización

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