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í:

// 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.

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.

/**
 * 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.

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:

<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.

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:

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:

<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.

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:

<!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

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.