Turnstile won't load in v-if
vptill opened this issue · comments
🐛 The bug
After upgrading to Nuxt RC-13, the Turnstile stopped loading if put in v-if. It can be seen in the Network tab of the browser, that there are no requests toward cloudflare domain. If I use it without v-if, or if I load it first, then put it in v-if it works perfectly.
Edit: Calling nuxtApp.$turnstile.loadTurnstile() won't work either
The stackblitz demo won't work for me either
🛠️ To reproduce
https://stackblitz.com/github/danielroe/nuxt-turnstile/tree/main/playground
🌈 Expected behaviour
Turnstile loads in any context
ℹ️ Additional context
Nuxt3 version RC-13
Node 16.15.0
Nitro 0.6.1
Same thing here with Nuxt 3 Stable.
Also running into this on stable.
The issue is with the useHead() function where the Cloudflare script is getting loaded. It only runs once, when loading the component, and if it's in a v-if, it won't load the script because addTurnstileScript is set to false.
Putting nuxtApp.$turnstile.loadTurnstile() in app.vue solves the issue (it sets addTurnstileScript to true), but it's not efficient as we would not like to load the script until it's needed. It works as a temporary fix for now though.
Ah, this seems like a change in behaviour in @vueuse/head whereby useHead is not reactive if called in a plugin.
cc: @harlan-zw