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.
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.
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í:
// window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
// window.Popper = require('popper.js').default;
// window.$ = window.jQuery = require('jquery');
// require('bootstrap');
} catch (e) {}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
// window.axios = require('axios');
// window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo';
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// encrypted: true
// });
Como se puede ver, el archivo no hace nada, pero lo he dejado en caso de que me arrepienta en el futuro.
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.
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app',
});
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.
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:
<template>
<p>parzibyte.me</p>
</template>
<script>
export default {
mounted() {
console.log("Funciona");
}
}
</script>
Lo registramos en app.js:
Vue.component('hola-mundo-component', require('./components/HolaMundoComponent.vue').default);
De ahora en adelante, cada que se cree un componente, debes registrarlo aquí y “compilar” los archivos.
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.
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
Cuando hayas:
resources/js/app.js
npm run serve
o npm run watch
public/js/app.js
en tu web de LaravelPuedes incluir el componente. Por ejemplo, el que hemos creado:
<div class="col-12">
<h1>Yo soy una plantilla de blade</h1>
<p>
Vamos a incluir un componente compilado de Vue:
</p>
<hola-mundo-component></hola-mundo-component>
<p>Listo. Se ha montado allá arriba</p>
</div>
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.
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:
<!doctype html>
<html lang="es">
<body>
<main role="main" class="container-fluid" id="app">
@yield("contenido")
</main>
<script src="{{url("/js/app.js")}}"></script>
</body>
</html>
Mis componentes los tengo en resources/js/components
y cada que hago un cambio en los mismos ejecuto:
npm run dev
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.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.
Ver comentarios
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 :)