Vuetify es una biblioteca de Vue basada en Material Design con la que podrás conseguir una UI fantástica de forma rápida y sencillísima. Con Vuetify no necesitas conocimientos de diseño (css, sass, etc) para lograr una interfaz potente y amigable.

El otro día di comienzo a un nuevo proyecto, el único requerimiento era usar PHP para el backend, en este aspecto la decisión fue rápida: Laravel 6. Para el frontend como tenía libertad absoluta, decidí utilizar Vue pero no tenía muy claro que biblioteca o framework usar de cara a facilitar el diseño y la maquetación. Comencé la fase de búsqueda y análisis de algunas posibles opciones: Bootstrap, BootstrapVue, Materializecss, Bulma, Buefy … y Vuetify!.


¿Porque Vuetify?

Una de las cosas que más me llamó la atención fue su extensa y cuidada documentación.

Cada uno de sus componentes cuenta con una «preview« en la que puedes modificar casi todas las propiedades del mismo en tiempo real. Esto te ahorra mucho tiempo ya que te evita estar escribiendo el HTML y Javascript en tu proyecto, así como tener que estar realizando estos cambios a mano sobre el código y recompilando hasta dar con el resultado que deseas.

Cada componente cuenta también con una tabla de contenido desde la que puedes consultar rápidamente sus propiedades, slots, eventos y funciones. Esto hace que sea muy sencillo interaccionar con sus componentes y conocer qué posibilidades te brindan.

Ante la pregunta, «¿Es Vuetify la biblioteca que debería elegir para el frontend?» Como con el resto de tecnologías, frameworks, o bibliotecas existentes, en la mayoría de los casos no existe «la mejor» sin más, sino la que mejor se adapte a tus necesidades y en mi caso, la respuesta era «sí» por diversas razones, como:

  • Totalmente hecha con Vue.
  • Documentación excelente.
  • Cada componente cuenta con multitud de parámetros a configurar, eventos con los que interaccionar y slots con los que personalizar.
  • Y en concreto de cara al proyecto a realizar en mi caso, cabe destacar que será para utilizado en una pantalla táctil, por lo que el diseño «Material Design» le viene como anillo al dedo.

Dicho todo esto, vamos manos a la obra!

Instalar Laravel 6

Instala la última versión de Laravel mediante composer:

composer create-project --prefer-dist laravel/laravel nombre-de-tu-proyecto

Instalar laravel/ui

Desde la versión de Laravel 6 ya no se incluye el pre-procesador ni framework Javascript y CSS por defecto. Toda esta funcionalidad fue movida para el frontend (scaffolding) que se incluía de forma predeterminada (Bootstrap y Vue) ha sido extraída a un nuevo paquete oficial llamado laravel/ui.

Accede al directorio nombre-de-tu-proyecto y ejecuta:

composer require laravel/ui

Cuando finalice la instalación podrás agregar la configuración básica de una de las siguientes 3 opciones:

php artisan ui bootstrap
 php artisan ui vue
 php artisan ui react

En nuestro caso ejecutamos el comando correspondiente a Vue. Si también quisieras agregar las vistas destinadas al registro y autenticación de usuarios, habría que indicar el argumento –auth en el comando anterior.

php artisan ui bootstrap --auth
 php artisan ui vue --auth
 php artisan ui react --auth

Ahora ubicate en la raíz de tu proyecto y ejecuta los siguientes comandos para descargar todas las dependencias necesarias:

composer install
 npm install

Visualizar componente Vue

Trás instalar laravel/ui habrás notado ciertos cambios en tu proyecto, los más destacables:

  • Un nuevo directorio «resources/js/components» y en su interior un componente vue de ejemplo «ExampleComponent.vue«.
  • La inicialización de Vue en el fichero «resources/js/app.js«

Vamos a configurar el proyecto para visualizar este componente de ejemplo en la vista predeterminada «resources/views/welcome.blade.php» y así comprobar que se ha instalado todo correctamente.

Edita la vista «welcome.blade.php» y pega en ella el siguiente contenido:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

        <!-- Styles -->
        <link href="{{ mix('css/app.css') }}" rel="stylesheet">

    </head>
    <body>
        <div id="app">
            <example-component></example-component>
        </div>
        <script src="{{ mix('js/app.js') }}"></script>
    </body>
</html>

Como puedes ver en el fragmento HTML anterior, se han incluido:

  • Los archivos app.css y app.js que son generados desde el webpack al compilar los archivos de estilos y javascript del proyecto.
  • Un «<div>« padre con el id «app». Todo el HTML incluido dentro de este bloque podrá hacer uso de vue.
  • El componente «example-component«.

Ejecuta ahora para compilar el javascript y css:

npm run dev

Ahora si recargas tu página debería mostrar el componente de ejemplo similar al siguiente:

Instalar Vuetify en Laravel

Desde la raíz del proyecto ejecuta la instalación mediante el siguiente comando:

npm install vuetify

Editar app.js

Agrega las siguientes líneas al fichero «resources/js/app.js» para inicializar Vuetify

import Vuetify from 'vuetify'
Vue.use(Vuetify);

Y añade la instancia de Vuetify como parámetro en la de Vue:

const app = new Vue({
    el: '#app',
    vuetify: new Vuetify(),
});

Editar app.scss

Añade 2 importaciones al fichero «resources/sass/app.scss«, una con la fuente de los iconos de material design y otra con el css correspondiente a la biblioteca vuetify.

// Fonts
@import url('https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css');

// Vuetify
@import '~vuetify/dist/vuetify.min.css';

Editar componente vue

Reemplaza el contenido del componente «resources/js/components/ExampleComponent.vue» por el indicado en este enlace correspondiente al layout de ejemplo «google-contacts» de la documentación oficial de vuetify. Puedes consultar otros layouts prefabricados aquí.

Vuelve a compilar el css y javascrip mediante el comando:

npm run dev

Y ahora deberías obtener un resultado como el mostrado en la siguiente captura:

Fin

Ya has terminado de instalar vuetify en laravel, ahora toca cacharrear y jugar con todos sus componentes! Dejo aquí un enlace directo a su documentación oficial.

Espero que esta guía te haya podido servir. Cualquier consulta, no dudes en comentar!

Comparte el post