fix(vue): support computed getter trigger (#638)

harlan-zw · web-flow · commit fd63a285cc95 · 2026-01-15T22:37:00.000+11:00
diff --git a/packages/vue/src/scripts/useScript.ts b/packages/vue/src/scripts/useScript.ts
@@ -26,9 +26,10 @@ export interface UseScriptOptions<T extends Record<symbol | string, any> = Recor
    * - `Promise` - Load the script when the promise resolves, exists only on the client.
    * - `Function` - Register a callback function to load the script, exists only on the client.
    * - `server` - Have the script injected on the server.
-   * - `ref` - Load the script when the ref is true.
+   * - `Ref<boolean>` - Load the script when the ref becomes true.
+   * - `() => boolean` - Getter function, load the script when return value becomes true.
    */
-  trigger?: BaseUseScriptOptions['trigger'] | Ref<boolean>
+  trigger?: BaseUseScriptOptions['trigger'] | Ref<boolean> | (() => boolean)
   /**
    * Unhead instance.
    */
@@ -78,11 +79,14 @@ export function useScript<T extends Record<symbol | string, any> = Record<symbol
   if (scope && typeof options.trigger === 'undefined') {
     options.trigger = onMounted
   }
-  else if (isRef(options.trigger)) {
-    const refTrigger = options.trigger as Ref<boolean>
+  else if (isRef(options.trigger) || (typeof options.trigger === 'function' && options.trigger.length === 0)) {
+    // Handle refs, computed refs, and getter functions (zero-arg functions that return boolean)
+    // Getter functions like `() => shouldLoad.value` have length 0
+    // Callback functions like `(load) => onMounted(load)` have length 1+
+    const trigger = options.trigger as Ref<boolean> | (() => boolean)
     let off: WatchHandle
     options.trigger = new Promise<boolean>((resolve) => {
-      off = watch(refTrigger, (val) => {
+      off = watch(trigger, (val) => {
         if (val) {
           resolve(true)
         }
diff --git a/packages/vue/test/unit/useScript.test.ts b/packages/vue/test/unit/useScript.test.ts
@@ -117,6 +117,43 @@ describe('vue e2e scripts', () => {
     expect(status2.value).toEqual('loading')
   })
 
+  it('getter function trigger', async () => {
+    const dom = useDom()
+    const head = createHead({
+      document: dom.window.document,
+    })
+
+    const shouldLoad = ref(false)
+
+    const { status, _triggerPromises } = useScript({
+      src: '//getter-trigger.script',
+    }, {
+      // getter function like () => shouldLoad.value
+      trigger: () => shouldLoad.value,
+      head,
+    })
+
+    // promise pending
+    expect(_triggerPromises).toMatchInlineSnapshot(`
+      [
+        Promise {},
+      ]
+    `)
+
+    expect(status.value).toEqual('awaitingLoad')
+
+    // trigger by setting the ref
+    shouldLoad.value = true
+    // wait next tick
+    await new Promise<void>((resolve) => {
+      setTimeout(() => {
+        resolve()
+      }, 25)
+    })
+
+    expect(status.value).toEqual('loading')
+  })
+
   it('respects useScript privacy controls - #293', async () => {
     const head = createHeadCore()
     const script = useScript({
