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í:
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
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:
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:
- Creado el componente
- Registrado el componente en
resources/js/app.js - Ejecutado
npm run serveonpm run watch - Incluido el archivo
public/js/app.jsen tu web de Laravel - 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:
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.
Te dejo con más tutoriales de Vue, ejemplos de código con PHP o algunos artículos sobre Laravel.
Hola! me gustó tu explicación, pero tengo un error. Cuando ejecuto npm run dev, me elimina el nuevo componente que registré en el archivo “resources/js/app.js”.
Y si quisiera trabajar en Laravel con Vue y Typescript en vez de Javascript regular, ¿qué debería hacer?
Hola, esto te puede servir: https://github.com/maxgaurav/laravel-mix-with-typescript
Saludos 🙂