Agregar Quasar Vue con Typescript

Introducción

En esta ocasión les traigo como integrar Quasar Framework a nuestro proyecto VueJS 2 con Typescript, cabe destacar que desde este enlace tengo la instalación de nuestro proyecto aquí. Quasar Framework nos muchas herramientas además de gran cantidad de componentes, una documentación bien hecha, tiene gran soporte, tiene soporte Typescript tantos en componentes como el CLI y permite integraciones web, ElectronJS y aplicaciones híbridas. 

Para realizar la integración sería factible que tuviesen el proyecto desde cero para no haber complicaciones en el camino.

Manos a la obra

Lo primero que haremos es editar el archivo .eslintrc que se encuentra en la raíz del proyecto, esto con el objetivo de que no falle la importación de Quasar al proyecto.

"@typescript-eslint/no-var-requires": 0,

Ahora dentro del directorio, vamos a ejecutar el siguiente comando (Con esto nos saldrá una interfaz en el terminal para ir haciendo las configuraciones):

vue add quasar

Luego elegimos Sass recomendado y en este caso usaremos MDI (Material Design Icons) o cualquier otro repositorio de iconos que prefiramos.

Configuramos el paquete de idioma que tendrá por defecto la aplicación y aceptaremos que tenga soporte multi-idiomas (si ustedes lo desean). Cabe destacar que deben revisar los idiomas disponibles desde el repositorio aquí.

Ya para finalizar, añadir las características que queremos agregar a la aplicación. En mi caso solo le dí soporte a Internet Explorer 11 (Que para estas fechas ya Microsoft indica que lo descontinuarán) y MDI, como para asegurar las importaciones de los iconos. 

Nota: Se selecciona con espacio las características que queramos agregar.

Ya una vez finalizado la instalación, podemos proceder ejecutando lo siguiente en el terminal:

yarn serve

Luego desde el navegador accedemos por URL http://localhost:8080/. En este punto parece funcionar todo bien. Haremos una pequeña prueba con un componente diseñado por ellos.

Vamos a dirigirnos a su sitio web en este enlace y en este caso buscaremos el componente Avatar y nos copiaremos el componente como describo a continuación

Nos copiamos esta línea y la vamos a pegar en el archivo src/components/HelloWorld.vue en la línea siguiente del logo. Así como les muestro a continuación.

En este caso modifique el atributo icon con mdi-blogger, porque justamente cambie los iconos por defecto de la aplicación. Igualmente podemos elegir otro icono buscándolo en este enlace.

Ya por último podemos guardar los cambios y automáticamente debemos ver los cambios en el navegador, así como vemos a continuación.

Conclusión