En este post te mostraré cómo usar Vue con Laravel, es decir, crear componentes de Vue y usarlos dentro de Laravel, compilando los componentes de Vue que estarán en un archivo con extensión .vue en lugar de usar HTML.

Laravel es un framework del lado del servidor que utiliza el lenguaje PHP. Vue es un framework del lado del cliente que utiliza JavaScript (ya sea con TypeScript, CoffeeScript, etcétera).

Veamos cómo usar estas dos tecnologías en conjunto.

Instalar dependencias para configurar Vue con Laravel

Con composer necesitamos agregar la dependencia laravel/ui que permite usar Vue o React. La instalamos en modo desarrollo con:

composer require laravel/ui --dev

Después de eso vamos a generar la estructura básica del front-end con:

php artisan ui vue

El package.json se habrá modificado así que hay que refrescar las dependencias usando NPM con:

npm install

Eso es todo lo que necesitamos instalar, ahora veamos el código.

Modificando bootstrap.js

La ubicación de este archivo es resources/js/bootstrap.js

No hay que confundir este archivo con el framework de diseño con el mismo nombre.

Este archivo se encarga de cargar algunas dependencias como jQuery, lodash, Popper, Axios, entre otros (incluso carga el JS de Bootstrap, ahora sí me refiero al framework de diseño).

En mi caso no necesito todo eso, así que lo he comentado y al final queda así:

Relacionado:  Eliminar clave foránea en migración de Laravel

Como se puede ver, el archivo no hace nada, pero lo he dejado en caso de que me arrepienta en el futuro.

Ajustando app.js

La ubicación de este archivo está en resources/js/app.js

Aquí es en donde registramos nuestros componentes manualmente (aunque en los comentarios se provee una manera de hacerlo automáticamente). También aquí es en donde se inyecta Vue de manera global.

Nota: presta atención a este archivo y al registro de componentes, pues en un momento vamos a abrirlo de nuevo.

El registro de componentes está en la línea 22, y ahora que lo pienso podría evitar las dependencias simplemente eliminando la línea 7.

Creando nuestro primer componente para usar Vue con Laravel

Vamos a crear un componente de Vue, que será compilado y después montado en nuestra app de Laravel. Los componentes están ubicados en resources/js/components

Creamos un archivo llamado HolaMundoComponent.vue con el siguiente contenido:

Lo registramos en app.js:

De ahora en adelante, cada que se cree un componente, debes registrarlo aquí y “compilar” los archivos.

Compilación de componentes

Aquí viene la parte interesante y es en donde nuestros componentes se compilan como cuando usamos webpack. Puedes establecer variables del entorno antes de compilar.

En fin, si quieres simplemente compilar, ejecuta: npm run dev

Compilando componentes para usar Vue con Laravel

Compilando componentes para usar Vue con Laravel

Ese comando va a compilar los componentes y los colocará en el archivo public/js/app.js. Este archivo es el que tienes que incluir en tu HTML.

El comando npm run dev es un comando que se ejecuta y se termina, y que tenemos que ejecutar cada vez que modifiquemos un componente. Si quieres que compile cuando se detecte un cambio, ejecuta:

Relacionado:  Cuidado con las rutas de Laravel

npm run watch

Aviso: no olvides incluir el archivo public/js/app.js en Laravel.

Punto de montaje de la app

La app de vue será montada en el elemento con el id app, yo sugiero que le asignes ese id a tu contenedor principal.

Yo utilizo Bootstrap así que le he asignado en el main.

Si quieres, puedes cambiar el punto de montaje en resources/js/app.js

Incluyendo componente de Vue en Laravel

Cuando hayas:

  1. Creado el componente
  2. Registrado el componente en resources/js/app.js
  3. Ejecutado npm run serve o npm run watch
  4. Incluido el archivo public/js/app.js en tu web de Laravel
  5. Definido un elemento en donde se montará la app

Puedes incluir el componente. Por ejemplo, el que hemos creado:

No importa si usas blade o no. Ahora al visitar esa ruta de Laravel verás:

Montando componente de Vue en app de Laravel

Montando componente de Vue en app de Laravel

Parece simple, pero esto abre un mundo de posibilidades con los componentes de Vue.

Poniendo todo junto

Te voy a mostrar mi ejemplo. Tengo una plantilla maestra. No te puedo mostrar todo, pero sí una parte en donde indico el contenedor de la app e importo el script:

Mis componentes los tengo en resources/js/components y cada que hago un cambio en los mismos ejecuto:

npm run dev

Conclusión

Sé que el tutorial es algo largo pero quería contar mi experiencia para usar Vue con Laravel.

Me agradó bastante pues normalmente uso Vue pero sin webpack, y ahora que Laravel ofrece una manera sencilla de trabajar con mis 2 frameworks favoritos quise hacer un tutorial.

Obviamente esto no me lo inventé yo; leí la documentación oficial.

Relacionado:  Variables del entorno con Vue.js y Vue CLI

Te dejo con más tutoriales de Vue, ejemplos de código con PHP o algunos artículos sobre Laravel.

Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 383 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

2 Comments

Jean Hernández · febrero 13, 2020 a las 7:11 am

Y si quisiera trabajar en Laravel con Vue y Typescript en vez de Javascript regular, ¿qué debería hacer?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: