[Bug] Fix VsButton throwing error on $nextTick

[Brugarolas]

Bug: Sometimes when we click a VsButton it throws the next error: Console error: Error in nextTick: “TypeError: Cannot read property ‘clientWidth’ of undefine”. That is caused because click function executes a this.$nextTick() and VsButton may not exist in next tick (eg: because of transitions between routes in SPAs or when closing a VsDialog).

It is reproducible in Vuesax documentation: https://lusaxweb.github.io/vuesax/components/dialog.html. Open and then close Dialog and you should see the error on the console.

[clopezpro]

FUNCIONA OK

[tepajc]

@clopezpro Yo tengo el mismo problema. En mi caso el error aparece cuando presiono un botón dentro de un cuadro de diálogo, por ejemplo confirmación.

En el sitio de la documentación está ocurriendo lo mismo

https://lusaxweb.github.io/vuesax/components/dialog.html#alert

Que podría hacer para resolverlo?

Gracias

[lk77]

Hello,

same error here, when will this PR get merged ?

thanks.

[CarlosCondor]

This repository is unmaintained for a while. You can use this fork with some fixes (like this one mencioned): https://github.com/Brugarolas/vuesax

Este repositorio lleva bastante tiempo sin mantenerse. Podéis usar este Fork que incluye algunas correcciones como la mencionada en esta issue: https://github.com/Brugarolas/vuesax

[tepajc]

@CarlosCondor Muchas gracias por tu aporte!
En mi caso sigo teniendo el mismo problema cuando intento cerrar un dialog, como ocurre en la documentación oficial del paquete
https://lusaxweb.github.io/vuesax/components/dialog.html#confirm.
Actualmente tengo instalada la versión del fork

[CarlosCondor]

@CarlosCondor Muchas gracias por tu aporte!
En mi caso sigo teniendo el mismo problema cuando intento cerrar un dialog, como ocurre en la documentación oficial del paquete
https://lusaxweb.github.io/vuesax/components/dialog.html#confirm.
Actualmente tengo instalada la versión del fork

@tepajc
El error concreto que se menciona en este PR (...$nexTick) está solucionado en el Fork de @Brugarolas. Nosotros usamos este Fork en el que vamos aplicando parches a los errores que nos vamos encontrando.
Si sigues teniendo un error instalando nuestro Fork, es posible que tu error sea por algo distinto a lo que se menciona en esta issue..

Si te sirve de algo, nosotros hemos optado por dejar de utilizar esta librería ya que no tiene ningún tipo de garantías y no es apta para producción, y estamos en proceso de eliminar las dependencias actuales a esta librería.

Personalmente te recomendaría dejar de usarla si aún estas a tiempo, antes de acoplarte más a ella y que te sea más dificil. En su lugar puedes utilizar frameworks más sólidos como Boostrap, Vuetify o por el estilo.

[tepajc]

@CarlosCondor
Muchas gracias por tus recomendaciones!. Aún estoy a tiempo de cambiar de librería.
Por otro lado, podrías recomendarme algún admin template? Estuve probando Coreui, pero tengo problemas para aplicar tree shaking, ustedes lo probaron?

[clopezpro]

@CarlosCondor Muchas gracias por tu aporte!
En mi caso sigo teniendo el mismo problema cuando intento cerrar un dialog, como ocurre en la documentación oficial del paquete
https://lusaxweb.github.io/vuesax/components/dialog.html#confirm.
Actualmente tengo instalada la versión del fork

@tepajc
El error concreto que se menciona en este PR (...$nexTick) está solucionado en el Fork de @Brugarolas. Nosotros usamos este Fork en el que vamos aplicando parches a los errores que nos vamos encontrando.
Si sigues teniendo un error instalando nuestro Fork, es posible que tu error sea por algo distinto a lo que se menciona en esta issue..

Si te sirve de algo, nosotros hemos optado por dejar de utilizar esta librería ya que no tiene ningún tipo de garantías y no es apta para producción, y estamos en proceso de eliminar las dependencias actuales a esta librería.

Personalmente te recomendaría dejar de usarla si aún estas a tiempo, antes de acoplarte más a ella y que te sea más dificil. En su lugar puedes utilizar frameworks más sólidos como Boostrap, Vuetify o por el estilo.

Soy nuevo, como puedo usar su Fork ? uso npm install vuesax3

[clopezpro]

Como podria usar https://github.com/Brugarolas/vuesax en mi aplicacion vue, usando npm?

[tepajc]

Como podria usar https://github.com/Brugarolas/vuesax en mi aplicacion vue, usando npm?

Lo podrías instalar con npm install Brugarolas/vuesax

[Brugarolas]

Como podria usar https://github.com/Brugarolas/vuesax en mi aplicacion vue, usando npm?

Buenas @clopezpro, el fork lo puedes instalar con npm install --save @brugarolas/vuesax y se añadirá automáticamente al package.json de tu proyecto.

Luego puedes seguir las instrucciones de uso de Vuesax (aún no las he actualizado en el fork) pero cambiando los import ? from 'vuesax' por import ? from '@brugarolas/vuesax'. Es decir, añadiendo @brugarolas/ delante de vuesax.

Algo así, vaya (ejemplo modificado):

import Vue from 'vue'
import Vuesax from '@brugarolas/vuesax'
 
import '@brugarolas/vuesax/dist/vuesax.css'
Vue.use(Vuesax)

El fork contiene solo arreglos así que es compatible con la librería original, la lista de cambios la puedes encontrar aquí (de momento estamos usando la rama bipi-patch para los parches).

Si encuentras algún error más no dudes en ponerte en contacto conmigo y lo resolveré cuando pueda (ya tengo localizado alguno, pero no he tenido tiempo de arreglarlo todavía).

Espero haberte servido de ayuda. ¡Un saludo!

[Dra-Tammer]

thanks