,

Laravel 10 Vue 3 with Inertia.js | Vite | Tailwind | ChartJs | DataTables: Double CRUD

Posted by






Doble CRUD Laravel 10 Vue 3 con Inertia.js | Vite | Tailwind | ChartJs | DataTables

Doble CRUD Laravel 10 Vue 3 con Inertia.js | Vite | Tailwind | ChartJs | DataTables

Si estás buscando una manera eficiente y moderna de realizar operaciones CRUD en tu aplicación web, el stack Doble CRUD Laravel 10 Vue 3 con Inertia.js, Vite, Tailwind, ChartJs y DataTables es la solución perfecta para ti.

Laravel es un reconocido framework de PHP que ofrece un conjunto completo de herramientas para el desarrollo web. Vue.js es un framework progresivo de JavaScript que se utiliza para construir interfaces de usuario interactivas. Inertia.js es una librería que combina las características de Laravel y Vue.js para crear aplicaciones de una sola página de forma fluida y sin tener que construir una API separada.

Vite es un nuevo build tool que permite una experiencia de desarrollo web extremadamente rápida al utilizar ESM (EcmaScript Modules). Tailwind CSS es un framework de diseño utilitario que te permite construir rápidamente interfaces de usuario elegantes. ChartJs es una librería de gráficos JavaScript que te permite crear visualizaciones de datos interactivas. DataTables es un plugin para jQuery que te permite añadir capacidades avanzadas de interacción a tus tablas HTML.

Al combinar todas estas tecnologías en un solo stack, puedes beneficiarte de la potencia y eficiencia de Laravel para procesar datos en el backend, mientras que Vue.js y Inertia.js te permiten crear dinámicamente interfaces de usuario interactivas en el frontend. Vite agiliza el proceso de desarrollo al proporcionar una experiencia de desarrollo web extremadamente rápida. Tailwind CSS te permite diseñar de forma eficiente y elegante, mientras que ChartJs y DataTables te permiten visualizar y gestionar tus datos de una manera fácil y efectiva.

En resumen, el stack Doble CRUD Laravel 10 Vue 3 con Inertia.js, Vite, Tailwind, ChartJs y DataTables es una combinación poderosa que te permite construir aplicaciones web modernas y eficientes de manera rápida y sencilla. Si estás interesado en llevar tus habilidades de desarrollo web al siguiente nivel, definitivamente deberías considerar trabajar con este stack.


0 0 votes
Article Rating
20 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ricardo Llanos
7 months ago

Estimados, a alguien le pasó el siguiente error al quere eliminar un registro de Departments: SQLSTATE[23000]: Integrity constraint violation: 1451 Cannot delete or update a parent row: a foreign key constraint fails (`laravuecompany`.`employees`, CONSTRAINT `employees_department_id_foreign` FOREIGN KEY (`department_id`) REFERENCES `departments` (`id`) ON UPDATE CASCADE)

Jose Nunez
7 months ago

Hola, muchas gracias por el video, un gran trabajo! Me gustaría hacerte una consulta, como solucionas el problema de eliminar un departamento cuando ya tiene empleados? Si está vacio lo elimina bien, pero con algún empleado registrado no me deja eliminarlo, un saludo y muchas gracias de nuevo.

LAZARO FLORES ROLDAN
7 months ago

El problema es que primero haces todos los controladores, luego todas las vistas. No se logra entender algunas partes por esta razón, la explicación está aislada

DevJira
7 months ago

Error "The department id field must be a number" block Create employee

David Campuzano Gomez
7 months ago

Buenos días. Me pareció muy bueno este video. Donde se puede descargar el repositorio del proyecto.

Miguelon SFF Supa FF
7 months ago

Muy buenos dias Profe. Gracias por compartir. Se puede trabajar con Supabase? Gracias. Desde Quito Ecuador.

Thiago Petherson
7 months ago

Hello. Thank you for the video. I'm getting this error on componente Report.vue. Could you help me ?

Uncaught (in promise) TypeError: e.slice is not a function
at p (datatables.net-vue3.mjs:99:47)
at datatables.net-vue3.mjs:84:39
at runtime-core.esm-bundler.js:2675:88
at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:17)
at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2655:19)
at flushPostFlushCbs (runtime-core.esm-bundler.js:325:40)
at render2 (runtime-core.esm-bundler.js:6335:5)
at mount (runtime-core.esm-bundler.js:3824:13)
at app.mount (runtime-dom.esm-bundler.js:1431:19)

Oswaldo Calderón
7 months ago

😮 Excelente

Massuttier
7 months ago

Muchas gracias por la info! algunas veces meja borrar algun departamento y otras veces me marca un error. Pregunta: Das asesorias?

Mario Alejandro
7 months ago

¡Qué buen tutorial! Muchas gracias por compartir. Tengo una curiosidad ¿Qué tema usaste en VS Code? se ven muy agradables los colores en el código.

DevJira
7 months ago

thank you instructor

Jose Alberto Duran Garcia
7 months ago

disculpa tenes mas videos o es el unico

DevJira
7 months ago

ขอบคุณมากๆ😊😊😊

Ronald O.I.O.
7 months ago

poque me vota, al momento de aumentar las pestañas , departments ,etcc …. se refresa y me vota y no muestras la pagina principal ..muestra vacio , y esta todo igualito q el video

Pablo Mandile
7 months ago

Hola, por qué puede ser que en el seeding quiera insertar datos en la columna department en employees en lugar de la columna department_id, tengo que modificar algo más en el seeding?

Cristian CGuzman
7 months ago

Com emits y props, porfa

BRUNO
7 months ago

Muy bueno, me encanto. Tengo una pregunta… cada vez que cambio de página; si bien, no recarga la pagina, si me aparece una barra de progreso arriba; ósea, el cambio de página no es fluido ¿sabes a que se podría deber eso?

Rafa Alarcón
7 months ago

Un video fantástico!!! Muchas gracias y felicidades por el trabajo realizado!

Luis Fer Lara
7 months ago

Hola buenos dias, tengo un error en el eliminar, hago click en eliminar carga pero no elimina, otra cosa es que en la consola del navegador no manda ningun tipo de error

Ingrid Moran
7 months ago

Wow es un tutorial muy completo laravel con vue ! gracias por compartir tus conocimientos, estoy realizando un proyecto personal tomando como plantilla este CRUD he visto muchas veces el video y aunque compartes el codigo fuente, para comparar esta bien, pero aprendo mejor paso a paso segun tus instrucciones en el tutorial. nuevamente gracias.