Trabajando con Vuetify 2 – Parte 1

Posted by in HTML5

En una entrada previa os hablaba del framework Vuetify para trabajar con VueJS, y con el que llevo ya varios meses. Al principio de trabajar utilizaba las primeras versiones, siempre con muy buenos resultados, hasta la más reciente versión estable 1.x, concretamente la 1.5.18.

Hace más o menos un año, apareció la nueva versión 2.x de VuetifyJS y la adaptación a esta nueva versión ha necesitado por mi parte realizar un esfuerzo, ya que los cambios son bastantes e importantes, al no existir plena compatibilidad entre la versión 1 y la 2. Os cuento.

Puedes ayudar a este blog con tu aportación!

Problemas de compatibilidad … en Javascript

Seguramente, si has programado con algún framework de Javascript, los problemas de compatibilidad entre versiones no será algo desconocido a lo que enfrentarte y ya sabes lo que toca: remangarse, y bien.

En el caso de Vuetify, eso es exactamente lo que me ha pasado cuando algún proyecto mediano-grande en los que trabajo notó el cambio, dándome errores de todo tipo.

Precisamente, este «problema» de la compatibilidad es uno de los aspectos que más valoro cuando tengo que entrar a trabajar con nuevas tecnologías, y concretamente, fue decisivo en mi no-opción frente a React.

En el caso de Vuetify, he de decir que los errores que recibí me llevaron directamente a una página de guia para migrar bastante completa, que me costó descifrar bastante tiempo, porque los cambios fueron bastantes.

Empezar con Vuetify, utilizando una plantilla predefinida

Tal y cómo hice cuando empecé con Vuetify, casi lo mejor que pude hacer es utilizar una de las plantillas predefinidas que vienen de ejemplo, y empezar a trastear. Lo que pasa es que, dado que la funcionalidad era tan básica, que si necesitaba algo más, tenía que investigar bastante. Y aquí es donde quiero contarte qué he hecho. También puedes conseguir más plantillas predefinidas más elaboradas de pago y gratuitas aquí.

Por un lado, no voy a utilizar Vue-CLI ni nada de esto. Todo directo y sin ayudas desde CDN, sin usar nodeJS, y que haré en varias partes (esta es la primera!), dado que el proceso no se puede explicar en una sola entrada.

De momento, si has leído la guía de migración, verás que incluye algunas recomendaciones si usas CDN, y precisamente es lo que vamos a utilizar, para el código HTML, que es bastante básico, si bien, lo verdaderamente importante es las referencias a las librerías Javascript de VueJS, etc, etc, …

A decir verdad, y antes de ver código, es importante conocer el componente v-app, que es el punto de entrada a la aplicación, y por tanto obligatorio, ya que es el que se encarga de que tu aplicación se vea correctamente a cualquier tamaño y en los navegadores soportados.

Mi recomendación sobre Vuetify

Sinceramente, yo recomiendo utilizar Vuetify si trabajas con VueJS, por varias razones:

  • Es bonito
  • Tiene muy buena documentación
  • Está en constante evolución
  • Tiene multitud de ejemplos

En definitiva, una buena alternativa utilizando Material Design para tu aplicación.

Selección de plantilla predefinida: YouTube

Quizás, no es la plantilla más simple, pero sí es una de las que más provecho se puede sacar, en cuanto a disponer de una plantilla para nuestro provecho. También es muy interesante la plantilla de login, de la que se puede extraer un componente para reutilizar. Y otra plantilla para aprender sobre posicionamiento es la Sandbox.

El paso primero es descargar la plantilla (en versiones previas de Vuetify, disponían de un fichero comprimido con todo lo necesario, mientras que ahora, sólo hay disponible el fichero .vue). A continuación, te cuento las distintas modificaciones que hay que realizar.

Código HTML

Pero volvamos al código. Lo único que vamos a dejar en esta primera parte es el código HTML de index.html, con las librerías a utilizar, y varias cositas más.

Importante!!! En ningún momento vamos a utilizar NodeJS ni nada de eso, todo sin procesamiento (tal cual expliqué en VueJS sin ayudas). Quizás no es lo más adecuado para el desarrollo web, pero eso no quita la importancia de saber cómo funciona «una mínima parte» de la caja negra que es Webpack, NodeJs, …. y los «lentos» npm install que son eternos, llenos de librerías de Javascript que muchas no sabes ni para que se usan. Evidentemente, no haremos test unitarios (que debiéramos, pero esto queda para el futuro!).

Cómo ya no hay opción de descargar todo lo necesario, te dejo el código HTML de lo que necesitamos:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
	
	<link type='image/png' rel='shortcut icon' href='img/favicon.ico' />
	<title>Manejando Datos - Vuetify 2 Ejemplo</title>
	
		<link type="text/css" rel="stylesheet" href="css/proyecto.css">
		
</head>
<body>
  <div id="app"></div>
  	
	<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  
	<script src="componentes/menu.js"></script>
	<script src="scripts/index.js"></script>
  
</body>
</html>

El código HTML es simple: en el HEAD dispondremos de las distintas librerías de estilo que nos hacen falta: material design, vuetify, y CSS propio.

En la parte del BODY tenemos el DIV donde se desarrollará toda la plantilla, y cargaremos el código Javascript que nos hace falta: vue, y vuetify.

El código incluido en Menu.js será donde pongamos la plantilla .vue que nos hemos descargado.

Para mejorar las opciones disponibles, puede resultar de mucho interés incluir también VueX (que veremos en la tercera parte), vue-router (para el manejo de URLs), y axios (para llamadas API). Además, cargaremos Javascript de distintas partes: por un lado, cargamos distintos archivos que compondrán nuestro store de VueX, y por otro, cargaremos distintos componentes.

La segunda parte de esta serie la dedicaremos a trabajar con Menu.js, mientras que en la parte 3 hablaremos del store y Vuex. En la parte 4 realizaremos distintas modificaciones en el código para permitir la reutilización de componentes.

El código completo lo he subido a mi GitHub.

Espero que te resulte de utilidad, y nos leemos en la siguiente parte, donde explicaremos cómo disponer del menú.