Integrar Vuetify en Laravel NOSPA

Aunque no siempre será un requisito integrar Vuetify en Laravel, pueden ser varios los motivos por el que desees hacer esto en lugar de generar componentes con Vuejs, por ejemplo que te guste más esta forma de desarrollar.

En este tip and trick vamos a ver cómo integrar Vuetify en Laravel NOSPA, es decir, manteniendo el comportamiento típico de Laravel vamos a poder definir componentes Vuejs en forma de Mixins desde las plantillas Blade, algo sin duda muy interesante.

Instalar Vuetify en un proyecto Laravel

Lo primero que debemos hacer es instalar Vuetify en nuestro proyecto.

Una vez instalado, vamos a abrir el archivo resources/js/app.js y añadimos el siguiente código debajo de window.Vue:

Antes de seguir, recuerda ejecutar el comando yarn watch o npm run watch para que todo esté funcionando.

Ahora sólo necesitamos definir una template blade para utilizar en este caso las fuentes de Material Icons, así que vamos a crear el archivo resources/views/layout.blade.php añadiendo el siguiente código:

Algo importante aquí es ver cómo estamos utilizando el componente v-app de Vuetify, la integración de las fuentes Material Icons y el uso de @stack al final del archivo donde iremos añadiendo scripts de forma dinámica, algo que vemos en todos los cursos de Laravel de la plataforma.

Mixins Globales con Laravel y Vuejs

Vamos a crear un archivo en public/js llamado globalMixins.js con el siguiente contenido:

Únicamente definimos un Array que vamos a ir llenando a demanda en nuestra aplicación. Pero primero debemos saber cómo utilizarlo, así que vamos a modificar los archivos resources/js/app.js y resources/views/layout.blade.php respectivamente:

La idea es poder añadir lógica a nuestra instancia Vue de forma dinámica desde cualquier lugar de nuestra aplicación.

Definir una Toolbar de Vuetifiy en Blade

Ya lo tenemos todo listo para empezar a desarrollar nuestros propios componentes, así que vamos a añadir una Toolbar de Vuetify a nuestra aplicación, para ello vamos a crear el archivo toolbar.blade.php y añadimos el siguiente código:

Puedes ver que realmente lo único que hacemos es utilizar Vuetify cómo lo hacemos siempre, pero además definimos un Mixin con JS que empujamos al Array global de Mixins, ese que está inyectado en la instancia de Vuejs a nivel global.