NUI clicking issue

Hi :wave:
I’m having some weird clicking issues with buttons using Vue and Vuetify (both are up-to-date, and I’ve also tried with older version, same shit) for styling in my NUI resource.
It doesn’t happen using a npm run serve or using devtools (localhost:13172)

The issue looks like this :

You can see that I try to click when the ripple effect appear but it actually does nothing, and after n try it finally works. Do note that if I use devtools to interact with it, it will work 100% of the time in devtools, and after using devtools to click one time, it will work 100% of the time inside FiveM until I mount my vue component again.

This issue doesn’t appear immediately the first time you run my resource, it slowly appear and became more difficult to click connection after connection until it’s nearly impossible to click on anything.
I tried connecting to the same local server with the same resource revision on an unaffected laptop and it worked flawlessly inside fivem until after too many connection, the issue slowly started to appear also on my laptop. Also tried to build the resource using gitlab-ci and still the same issue, so I guess it doesn’t come from my building environment.
Do note that I’m not sure if it comes from n connection or n connection with a new artifact of my resources.

I’m using webpack to build the resouce with Vue and Vuetify before running it in my server.
These buttons aren’t doing anything fancy except being stylized by Vuetify and having a @click="DoShit()".

<v-btn block small color="red darken-2" @click="toggleDebugVehicles()">debug vehicles</v-btn>

Do note also that it works perfectly if I use regular <button>

<button @click="toggleDebugVehicles()">toggleDebugVehicles</button>

Also, my vue-router seems to “break” randomly from times to times when I change a route once the clicking issue start to happen.

I tried to clear FiveM’s CEF cache but it didn’t helped at all. The only way I found which works as a workaround is to install windows again. :upside_down_face:

I can provide a standalone version of my built resource and/or source code with it if needed.
Thanks you in advance for any help with this since it’s been 3 month that I struggle with this issue now.

Seems to be fixed thanks to https://github.com/citizenfx/fivem/commit/fbd5c11df14693e9be8a9b86b02689abfc790f69
Will update later after more testings

Any new info in this as I’m having the same issue?

Are you using Vue.js?
Linking to the Vue.js repo related issue : https://github.com/vuejs/vue/issues/10366
Likely rebooting your computer is what ‘fix’ it.

yes, I’m using vue.js with vuetify. this only applies to vuetify buttons tho
It’s weird because when having windows fast start turned of or Restarting your pc via the start menu it’s fixed, that’s also what they say in the Github issue.

I had similar issue, I have isolated it to some weird event passthrough issue that is solved by using:

.v-btn__content {
  pointer-events: none;
}

Don’t even want to say how many hours I have spent on that thing…
That at least solved my issues with players not being click trough some buttons.
The CSS above only fixes Vuetify, nothing else.

3 Likes

Sup man ! I know i’m digging up a very old topic, but could you guide me on how to setup a VueJS project with FiveM ? Are you using CDNs or litteral noe project ?

Thank you pal :slight_smile: