search

jeffreyguenther / vue-turbolinks

A Vue mixin to fix Turbolinks caching
MIT License
287 stars 20 forks source link

Buefy Snackbar and Toast shown only first time #35

Closed mrdahbi closed 4 years ago

mrdahbi commented 4 years ago

Hi,

I'm using vue-turbolinks (globally) alongside Buefy components and it's been working great.

I'm now facing an issue where Snackbars and Toasts aren't shown the second and subsequent times they are triggered and there are no console errors. Disabling vue-turbolinks restores the expected behavior of the snackbar, so the issue is most certainly in how turbolinks loads these components.

Many thanks.

vue 2.6.12 buefy 0.9.3 vue-turbolinks 2.1.0

excid3 commented 4 years ago

Since I don't use Buefy, you'll have to submit an example app that replicates the problem.

You might need to build a custom integration for those depending on how Buefy implements them. vue-turbolinks is only saving the original HTML and restoring it before turbolinks navigates to a new page, nothing fancy. If Buefy is doing things outside of that scope, then vue-turbolinks won't handle it and you will need to build a workaround.

mrdahbi commented 4 years ago

The issue as I understand it comes from Buefy attaching snackbars and toasts to the body element and this is outside the element where Vue was mounted.

Buefy does have an option to set the container element but couldn't get it to work. I'm wondering if anyone has had the same issue.

[edit] I just noticed that Snackbar has transition as root element of the component (src). It may be the issue as described in the vue-turbolinks readme.

Thanks again !

excid3 commented 4 years ago

Ah yep, if it's doing things outside of where Vue is mounted then it isn't going to be handled by vue-turbolinks because we won't know about the change.

mrdahbi commented 4 years ago

After many trials and errors, I found a workaround by using vue-turbolinks as a mixin and not as a global plugin. I have posted an issue on Buefy's repo: https://github.com/buefy/buefy/issues/2969

excid3 commented 4 years ago

Great! Thanks for sharing your solution.

mrdahbi commented 4 years ago

Great! Thanks for sharing your solution.

Thank you for your awesome tutorials !