fix: prefer ref triggers or promise booleans

Fixes #265

Author: harlan-zw

docs/content/docs/1.guides/1.registry-scripts.md

@@ -155,6 +155,10 @@ Registry scripts doesn't stop you from making use of the core `useScript` featur
 - `scriptInput` - Additional input to pass to the script. Same as [useScript Input](/docs/api/use-script#scriptinput).
 
 ```ts
+import { useTimeout } from '@vueuse/core'
+import { useScriptCloudflareWebAnalytics } from '#imports'
+
+const { ready } = useTimeout(5000)
 useScriptCloudflareWebAnalytics({
   token: '123',
   // HTML attributes to pass to the script element
@@ -163,7 +167,7 @@ useScriptCloudflareWebAnalytics({
   },
   // useScript options used for advanced features
   scriptOptions: {
-    trigger: new Promise(resolve => setTimeout(resolve, 3000)),
+    trigger: ready,
     bundle: true,
   },
 })

docs/content/docs/1.guides/1.script-triggers.md

@@ -7,20 +7,25 @@ Nuxt Scripts provides several ways to trigger the loading of scripts.
 ::code-group
 
 ```ts [useScript]
+import { useTimeout } from '@vueuse/core'
+
+const { ready } = useTimeout(3000)
 useScript({
   src: 'https://example.com/script.js',
 }, {
   // load however you like!
-  trigger: new Promise(resolve => setTimeout(resolve, 3000))
+  trigger: ready, // refs supported
 })
 ```
 
 ```ts [Registry Script]
+import { useTimeout } from '@vueuse/core'
+
+const { ready } = useTimeout(3000)
 useScriptMetaPixel({
   id: '1234567890',
   scriptOptions: {
-    // load however you like!
-    trigger: new Promise(resolve => setTimeout(resolve, 3000))
+    trigger: ready
   }
 })
 ```
@@ -87,3 +92,16 @@ const myScript = useScript('/script.js', {
   trigger: new Promise(resolve => setTimeout(resolve, 3000))
 })
 ```
+
+## Ref
+
+You can use a ref to trigger the loading of a script. This is useful for any other custom trigger you might want to use.
+
+```ts
+const myRef = ref(false)
+const myScript = useScript('/script.js', {
+  trigger: myRef
+})
+// ...
+myRef.value = true
+```

package.json

@@ -72,7 +72,7 @@
     "@types/stripe-v3": "^3.1.33",
     "@types/vimeo__player": "^2.18.3",
     "@types/youtube": "^0.1.0",
-    "@unhead/vue": "1.11.1",
+    "@unhead/vue": "1.11.5",
     "@vueuse/core": "^11.0.3",
     "consola": "^3.2.3",
     "defu": "^6.1.4",
@@ -84,7 +84,7 @@
     "pathe": "^1.1.2",
     "pkg-types": "^1.2.0",
     "semver": "^7.6.3",
-    "shiki": "1.16.2",
+    "shiki": "1.17.6",
     "sirv": "^2.0.4",
     "std-env": "^3.7.0",
     "third-party-capital": "2.3.0",
@@ -98,10 +98,10 @@
     "@nuxt/devtools-ui-kit": "^1.4.2",
     "@nuxt/eslint-config": "^0.5.7",
     "@nuxt/module-builder": "^0.8.4",
-    "@nuxt/test-utils": "3.14.1",
+    "@nuxt/test-utils": "3.14.2",
     "@types/semver": "^7.5.8",
     "@typescript-eslint/typescript-estree": "^8.5.0",
-    "@unhead/schema": "1.11.1",
+    "@unhead/schema": "1.11.5",
     "acorn-loose": "^8.4.0",
     "bumpp": "^9.5.2",
     "changelogen": "^0.5.5",
@@ -119,15 +119,14 @@
   "resolutions": {
     "@nuxt/schema": "3.13.0",
     "@nuxt/scripts": "workspace:*",
-    "@unhead/dom": "1.11.1",
-    "@unhead/schema": "1.11.1",
-    "@unhead/shared": "1.11.1",
-    "@unhead/ssr": "1.11.1",
-    "@unhead/vue": "1.11.1",
+    "@unhead/dom": "1.11.5",
+    "@unhead/schema": "1.11.5",
+    "@unhead/shared": "1.11.5",
+    "@unhead/ssr": "1.11.5",
+    "@unhead/vue": "1.11.5",
     "nuxt": "^3.13.1",
     "nuxt-scripts-devtools": "workspace:*",
-    "shiki": "1.10.3",
-    "unhead": "1.11.1",
+    "unhead": "1.11.5",
     "vue": "^3.5.5",
     "vue-router": "^4.4.5"
   }

playground/pages/third-parties/youtube/multiple.vue

@@ -10,6 +10,9 @@ function changeVideo() {
 
 <template>
   <div>
+    <NuxtLink to="/third-parties/youtube/nuxt-scripts" class="block underline mb-5">
+      Single YouTube Player
+    </NuxtLink>
     <div>
       <ScriptYouTubePlayer :video-id="videoid" above-the-fold>
         <template #awaitingLoad>

playground/pages/third-parties/youtube/nuxt-scripts.vue

@@ -10,6 +10,9 @@ function changeVideo() {
 
 <template>
   <div>
+    <NuxtLink to="/third-parties/youtube/multiple" class="block underline mb-5">
+      Multiple YouTube Players
+    </NuxtLink>
     <div>
       <ScriptYouTubePlayer :video-id="videoid" above-the-fold>
         <template #awaitingLoad>