`beforeInit` is running server-side even when the `trigger` is set to `client`

[enkot]

Environment

• Operating System: Linux
• Node Version: v18.18.0
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: npm@10.2.3
• Builder: -
• User Config: devtools, modules
• Runtime Modules: @nuxt/scripts@0.4.3
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-yhnmge-s1db7e?file=app.vue

Describe the bug

Currently beforeInit is always running server-side even if the trigger is set to client, so this example from the docs doesn't work in SSR:

const { gtag } = useScript<GoogleTag>('https://www.google-analytics.com/analytics.js', {
  beforeInit() {
    // Google Analytics Setup
    window.dataLayer = window.dataLayer || []
    window.gtag = function gtag(...p) { window.dataLayer.push(p) }
    window.gtag('js', new Date())
    window.gtag('config', options.id)
  },
  use() {
    return { gtag: window.gtag }
  }
})

I suggest running beforeInit on the server side only if the trigger is set to server or on the client only.

Additional context

No response

Logs

No response

[harlan-zw]

Thanks! Should be fixed in v1.9.11

[enkot]

@harlan-zw Unfortunately it still doesn't work as expected( You can check this repro https://stackblitz.com/edit/github-yhnmge-zfah8i?file=app.vue If you run it you will see in the console:

2. after beforeInit
1. beforeInit

Expected:

1. beforeInit
2. after beforeInit

Looks like beforeInit is running in the async context for some reason 👀

[harlan-zw]

This may be a documentation/usage issue from here, beforeInit should only run if the script is actually going to be loaded, so it's executed right before the script tag is inserted.

In Nuxt's case that's after the hydration occurs as the DOM render is indeed async.

Would you mind providing some context on the issue you're having, maybe there's some logic I've overlooked.

[enkot]

You are right, makes sense, I was using it incorrectly :) Thank you for the explanation! Closing this issue.