Request a new registry script

[harlan-zw]

Background

Nuxt Scripts aims to make using third-party scripts as easy as possible, part of that is providing a registry of first-party - third-party scripts.

These registry scripts provide some improvements on top of just using useScript, such as:

• Validation on input
• Built-in type safety
• Fine-tuned performance with aggressive tree-shaking
• Appropriate privacy tags applied
• Appropriate SSR stubbing

For example, the Google Analytics registry script will validate the tag id, expose the gtag interface and allow you to access dataLayer server-side.

Requesting a registry script

As each new script added is extra maintenance for the project, only the top requested scripts will be added as official registry scripts. Others can be added to the docs as copy+pastable snippets.

If you'd like to request a script please do!

Submit what you'd like to see in this discussion, please include:

1. Vendor Name
2. Code sample
3. Documentation
4. useScript usage - We encourage users to provide a useScript equivalent if they've managed to get it working to unblock other users who may be using the same third-party scripts.

Contributing a registry script

If you're interested in contributing a registry script, it's important to know the constraints the module applies:

• No built-time dependencies, all script functionality must be loaded from a third-party source.
• We don't add any features on top of existing third-party scripts, all interfaces should be a best effort of matching.
• Default best performance and most aggressive privacy by default.

We prefer module authors to integrate with Nuxt Scripts to provide better integrations, a good example is the Nuxt Turnstile module.

[joachimhviid]

Microsoft UET

Vendor provided script:

<script> 
(function(w,d,t,r,u) {var f,n,i;w[u]=w[u]||[] ,f=function(){var o={ti:"TAG_ID_HERE", enableAutoSpaTracking: true}; o.q=w[u],w[u]=new UET(o),w[u].push("pageLoad")} ,n=d.createElement(t),n.src=r,n.async=1,n.onload=n .onreadystatechange=function() {var s=this.readyState;s &&s!=="loaded"&& s!=="complete"||(f(),n.onload=n. onreadystatechange=null)},i= d.getElementsByTagName(t)[0],i. parentNode.insertBefore(n,i)})(window,document,"script"," //bat.bing.com/bat.js","uetq"); 
</script> 

Documentation can be found here: https://help.ads.microsoft.com/#apex/ads/en/56686/2

I managed to get it working using the $script object directly with the following:

const { $script } = useScript(
  {
    src: 'https://bat.bing.com/bat.js',
    crossorigin: false,
  },
  {
    use() {
      return { uetq: window.uetq }
    },
  },
)

watch($script.status, (status) => {
  if (status === 'loaded') {
    const options = { ti: 'TAG_ID_HERE', enableAutoSpaTracking: true }
    // @ts-expect-error untyped
    options.q = window.uetq
    // @ts-expect-error untyped
    window.uetq = new UET(options)
  }
})

[joachimhviid]

TikTok Pixel

Vendor provided script:

!function (w, d, t) {
  w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie", "holdConsent", "revokeConsent", "grantConsent"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i="https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};
  ttq.load('YOUR_ID_HERE');
}(window, document, 'ttq');

Documentation here: https://ads.tiktok.com/help/article/get-started-pixel?lang=en

Similarly to the UET script, I only managed to get this working through the $script object. I used the useRegistryScript composable for my implementation:

const { $script } = useRegistryScript<TiktokPixelApi>('tiktok', () => ({
  scriptInput: {
    src: withQuery('https://analytics.tiktok.com/i18n/pixel/events.js', {
      sdkid: "YOUR_ID_HERE",
      lib: 'ttq',
    }),
    crossorigin: false,
  },
  scriptOptions: {
    use() {
      return { ttq: window.ttq }
    },
  },
  clientInit: import.meta.server
    ? undefined
    : () => {
        // @ts-expect-error untyped
        window.TiktokAnalyticsObject = 'ttq'
        const ttq: TiktokPixelApi['ttq'] = (window.ttq = window.ttq || [])

        ttq.methods = [
          'page',
          'track',
          'identify',
          'instances',
          'debug',
          'on',
          'off',
          'once',
          'ready',
          'alias',
          'group',
          'enableCookie',
          'disableCookie',
          'holdConsent',
          'revokeConsent',
          'grantConsent',
        ]

        ttq.setAndDefer = function (obj, method) {
          // @ts-expect-error untyped
          obj[method] = function () {
            // @ts-expect-error untyped
            // eslint-disable-next-line prefer-rest-params
            obj.push([method].concat(Array.prototype.slice.call(arguments)))
          }
        }

        ttq.methods.forEach((method) => ttq.setAndDefer(ttq, method))

        ttq.instance = function (name) {
          // @ts-expect-error untyped
          const instance = ttq._i[name] || []
          ttq.methods.forEach((method) => ttq.setAndDefer(instance, method))
          return instance
        }

        ttq.load = function (sdkId, options) {
          // @ts-expect-error untyped
          ttq._i = ttq._i || {}
          // @ts-expect-error untyped
          ttq._i[sdkId] = []
          // @ts-expect-error untyped
          ttq._i[sdkId]._u = 'https://analytics.tiktok.com/i18n/pixel/events.js'
          // @ts-expect-error untyped
          ttq._t = ttq._t || {}
          // @ts-expect-error untyped
          ttq._t[sdkId] = +new Date()
          // @ts-expect-error untyped
          ttq._o = ttq._o || {}
          // @ts-expect-error untyped
          ttq._o[sdkId] = options || {}
        }
      },
}))

watch($script.status, (status) => {
  if (status === 'loaded') {
    $script.then(({ ttq }) => ttq.holdConsent())
    $script.then(({ ttq }) => ttq.load("YOUR_ID_HERE"))
  }
})

[MarioC3]

Google reCAPTCHA

Docs: https://developers.google.com/recaptcha/intro

Example Script:

<script>
(function(){var w=window,C='___grecaptcha_cfg',cfg=w[C]=w[C]||{},N='grecaptcha';var gr=w[N]=w[N]||{};gr.ready=gr.ready||function(f){(cfg['fns']=cfg['fns']||[]).push(f);};w['__recaptcha_api']='https://www.google.com/recaptcha/api2/';(cfg['render']=cfg['render']||[]).push('explicit');(cfg['onload']=cfg['onload']||[]).push('onloadCallback');w['__google_recaptcha_client']=true;var d=document,po=d.createElement('script');po.type='text/javascript';po.async=true; po.charset='utf-8';var v=w.navigator,m=d.createElement('meta');m.httpEquiv='origin-trial';m.content='Az520Inasey3TAyqLyojQa8MnmCALSEU29yQFW8dePZ7xQTvSt73pHazLFTK5f7SyLUJSo2uKLesEtEa9aUYcgMAAACPeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZS5jb206NDQzIiwiZmVhdHVyZSI6IkRpc2FibGVUaGlyZFBhcnR5U3RvcmFnZVBhcnRpdGlvbmluZyIsImV4cGlyeSI6MTcyNTQwNzk5OSwiaXNTdWJkb21haW4iOnRydWUsImlzVGhpcmRQYXJ0eSI6dHJ1ZX0=';if(v&&v.cookieDeprecationLabel){v.cookieDeprecationLabel.getValue().then(function(l){if(l!=='treatment_1.1'&&l!=='treatment_1.2'&&l!=='control_1.1'){d.head.prepend(m);}});}else{d.head.prepend(m);}po.src='https://www.gstatic.com/recaptcha/releases/rKbTvxTxwcw5VqzrtN-ICwWt/recaptcha__en.js';po.crossOrigin='anonymous';po.integrity='sha384-1qCnjZ4tqdtwUnG8/biz1OfJ7vkM3jnPZ0W0wIcDu+NDwZyQHqHpscJVB8ezdlTM';var e=d.querySelector('script[nonce]'),n=e&&(e['nonce']||e.getAttribute('nonce'));if(n){po.setAttribute('nonce',n);}var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(po, s);})();
</script>

I got the Recaptcha v2 working by explicitly rendering the reCaptcha checkbox, so it's a little manual process.

<template>
	<div id="recaptchaEl"></div>
</template>

const { $script } = useScript<typeof grecaptcha>(
	{
		src: `https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit`,
		async: true,
		defer: true,
		crossorigin: undefined,
	},
	{
		use() {
			return window.grecaptcha
		},
		trigger: 'manual',
	}
)

onMounted(() => {
	window.onloadCallback = () => {
		window.grecaptcha.render('recaptchaEl', {
			sitekey: '{yourkey}',
			hl: 'en'
			callback: () => {}
			},
		})
	}

	if (window.grecaptcha) {
		window.onloadCallback()
	}

	if (!window.grecaptcha) {
		$script.load()
	}
})

[harlan-zw]

Posthog

#206 (5 upvotes)

[stefanobartoletti]

About PostHog you may want to have a look at the suggested integration with Nuxt

https://posthog.com/docs/libraries/nuxt-js

especially concerning disabling autocapture and manually set page capture on route change.

[AdamBD]

Rewardful

(Affiliate marketing with Stripe)

Needs to be global on all pages:

<script>(function(w,r){w._rwq=r;w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)}})(window,'rewardful');</script>
<script async src='https://r.wdfl.co/rw.js' data-rewardful='{key}'></script>

[harlan-zw]

Is there any technical documentation you can link?

[ryanweston]

https://developers.rewardful.com/javascript-api/overview

[amcolex]

Tawk.to

<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/{TAWKTO_ID}/{TAWKTO_WIDGET}';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->

[niklasfjeldberg]

Snapchat pixel

Docs

<!-- Snap Pixel Code -->
<script type='text/javascript'>
(function(e,t,n){if(e.snaptr)return;var a=e.snaptr=function()
{a.handleRequest?a.handleRequest.apply(a,arguments):a.queue.push(arguments)};
a.queue=[];var s='script';r=t.createElement(s);r.async=!0;
r.src=n;var u=t.getElementsByTagName(s)[0];
u.parentNode.insertBefore(r,u);})(window,document,
'https://sc-static.net/scevent.min.js');

snaptr('init', 'PIXEL_ID', {
'user_email': '__INSERT_USER_EMAIL__'
});

snaptr('track', 'PAGE_VIEW');

</script>
<!-- End Snap Pixel Code -->

[N-M]

Square payments SDK https://developer.squareup.com/reference/sdks/web/payments

https://web.squarecdn.com/v1/square.js

[sandros94]

Monaco Editor

This is my awful attempt into loading a Monaco Editor via useScriptNpm, while setting up a worker, add custom language (I had to use Nuxt MDC ofc 😏) and various options.

Am I doing this right? It looks bad but this was my first attempt.