fix: update to latest @nuxt/scripts implementation (#391)

Author: Yizack

src/runtime/components/NuxtTurnstile.vue

@@ -27,17 +27,21 @@ const el = ref()
 const unmountStarted = ref(false)
 let id: string | undefined | null = undefined
 let interval: NodeJS.Timeout
-const { render, reset: _reset, remove } = useScriptCloudflareTurnstile({
+const { onLoaded } = useScriptCloudflareTurnstile({
   scriptOptions: {
     trigger: useScriptTriggerElement({ trigger: props.trigger, el }),
   },
 })
 
+let _reset: Turnstile.Turnstile['reset']
+let remove: Turnstile.Turnstile['remove']
+
 const reset = () => {
   if (id) {
     _reset(id)
   }
 }
+
 const unmount = () => {
   unmountStarted.value = true
   clearInterval(interval)
@@ -47,17 +51,22 @@ const unmount = () => {
   }
 }
 
-onMounted(async () => {
-  id = await render(el.value, {
-    sitekey: props.siteKey || config.siteKey,
-    callback: (token: string) => emit('update:modelValue', token),
-    ...props.options,
-  })
-  interval = setInterval(reset, props.resetInterval)
+onMounted(() => {
+  // @ts-expect-error types from nuxt/scripts seem to be wrong
+  onLoaded(async ({ render, reset: resetFn, remove: removeFn }) => {
+    _reset = resetFn
+    remove = removeFn
+    id = await render(el.value, {
+      sitekey: props.siteKey || config.siteKey,
+      callback: (token: string) => emit('update:modelValue', token),
+      ...props.options,
+    })
+    interval = setInterval(reset, props.resetInterval)
 
-  if (unmountStarted.value) {
-    unmount()
-  }
+    if (unmountStarted.value) {
+      unmount()
+    }
+  })
 })
 
 onBeforeUnmount(unmount)

test/e2e.test.ts

@@ -44,4 +44,17 @@ describe('turnstile', async () => {
     await page.click('#home-link')
     await page.waitForEvent('console')
   })
+
+  it('elements are rendered', async () => {
+    const page = await createPage()
+
+    await page.goto(url('/'))
+    await page.click('button')
+
+    await page.waitForTimeout(1000) // wait 1 second for the element to be rendered
+
+    const inputExists = (await page.locator('input[name="cf-turnstile-response"]').all()).length > 0
+
+    expect(inputExists).toBe(true)
+  })
 })