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){varf,n,i;w[u]=w[u]||[],f=function(){varo={ti:"TAG_ID_HERE",enableAutoSpaTracking: true};o.q=w[u],w[u]=newUET(o),w[u].push("pageLoad")},n=d.createElement(t),n.src=r,n.async=1,n.onload=n.onreadystatechange=function(){vars=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'){constoptions={ti: 'TAG_ID_HERE',enableAutoSpaTracking: true}// @ts-expect-error untypedoptions.q=window.uetq// @ts-expect-error untypedwindow.uetq=newUET(options)}})

[joachimhviid]

TikTok Pixel

Vendor provided script:

!function(w,d,t){w.TiktokAnalyticsObject=t;varttq=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(vari=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(vare=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);returne},ttq.load=function(e,n){vari="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]=+newDate,ttq._o=ttq._o||{},ttq._o[e]=n||{};varo=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;vara=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 untypedwindow.TiktokAnalyticsObject='ttq'constttq: 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 untypedobj[method]=function(){// @ts-expect-error untyped// eslint-disable-next-line prefer-rest-paramsobj.push([method].concat(Array.prototype.slice.call(arguments)))}}ttq.methods.forEach((method)=>ttq.setAndDefer(ttq,method))ttq.instance=function(name){// @ts-expect-error untypedconstinstance=ttq._i[name]||[]ttq.methods.forEach((method)=>ttq.setAndDefer(instance,method))returninstance}ttq.load=function(sdkId,options){// @ts-expect-error untypedttq._i=ttq._i||{}// @ts-expect-error untypedttq._i[sdkId]=[]// @ts-expect-error untypedttq._i[sdkId]._u='https://analytics.tiktok.com/i18n/pixel/events.js'// @ts-expect-error untypedttq._t=ttq._t||{}// @ts-expect-error untypedttq._t[sdkId]=+newDate()// @ts-expect-error untypedttq._o=ttq._o||{}// @ts-expect-error untypedttq._o[sdkId]=options||{}}},}))watch($script.status,(status)=>{if(status==='loaded'){$script.then(({ ttq })=>ttq.holdConsent())$script.then(({ ttq })=>ttq.load("YOUR_ID_HERE"))}})

[wuchendi]

What is the type of TiktokPixelApi, and where does it come from?

[joachimhviid]

@WuChenDi I tried to find a link to the documentation of the functions, but I was unable to find it. TiktokPixelApi is something I had made when I initially made the implementation and the type looks like this:

typeTtqFns={track: (eventName: string,parameters: Record<string,unknown>)=>voidholdConsent: ()=>voidgrantConsent: ()=>voidrevokeConsent: ()=>voidenableCookie: ()=>voiddisableCookie: ()=>void}exportinterfaceTiktokPixelApi{ttq: TtqFns&{methods: string[]setAndDefer: (instance: TiktokPixelApi['ttq'],method: string)=>voidinstance: (name: string)=>TiktokPixelApi['ttq']load: (sdkid: string,options?: any)=>void}}

There are probably more functions available, but these are the ones that I needed at the time.

[wuchendi]

@joachimhviid Thank you for your contribution!

It seems they haven't provided type files, and I couldn't find any related information either.

[MarioC3]

Google reCAPTCHA

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

Example Script:

<script>(function(){varw=window,C='___grecaptcha_cfg',cfg=w[C]=w[C]||{},N='grecaptcha';vargr=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;vard=document,po=d.createElement('script');po.type='text/javascript';po.async=true;po.charset='utf-8';varv=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';vare=d.querySelector('script[nonce]'),n=e&&(e['nonce']||e.getAttribute('nonce'));if(n){po.setAttribute('nonce',n);}vars=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><divid="recaptchaEl"></div></template>

const{ $script }=useScript<typeofgrecaptcha>({src: `https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit`,async: true,defer: true,crossorigin: undefined,},{use(){returnwindow.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()}})

[gygoo]

reCAPTCHA v3 would also be very useful :)

[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.

[felixranesberger]

Would love to have Posthog integrated 🙌

[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.

[joaopedrodcf]

Usercentricts

A consent manager third party: https://docs.usercentrics.com/#/browser-ui?id=implementation

useScript({src: "https://app.usercentrics.eu/browser-ui/latest/loader.js",id: "usercentrics-cmp","data-settings-id": "XXXXXXXX",// Change the idasync: true,// async is already default just making it explicitdefer: false,// their docs doesn't use defer just following the example},{devtools: {registryKey: "UserCentrics",registryMeta: {name: "UserCentrics",},},trigger: "onNuxtReady",warmupStrategy: "preconnect",},);

[yuriystasiv]

@joaopedrodcf just curious, wouldn't warmupStrategy: 'preload' be better here?

[joaopedrodcf]

Yeah maybe is a better option actually nice point! :D

[toniengelhardt]

ahrefs Web Analytics

"With a free account, you can add as many sites as you want and track up to 1 million page views per month per site. For websites with higher volumes, you’ll have the option to upgrade."

https://help.ahrefs.com/en/articles/10247870-about-ahrefs-web-analytics

[shintaii]

Calendly

Docs

useScript({
url: 'https://calendly.com/YOURLINK',
parentElement: document.getElementById('SAMPLEdivID'),
prefill: {},
resize: bool
utm: {}
}

[agracia-foticos]

Awin? any solution?

[agracia-foticos]

https://developer.awin.com/v1/docs/advertiser-mastertag

[rubyllamadora]

HubSpot chat widget

1. HubSpot
2. Code sample

<script type="text/javascript">
function onConversationsAPIReady() {
console.log(`HubSpot Conversations API: ${window.HubSpotConversations}`);
}
/*
configure window.hsConversationsSettings if needed.
*/
window.hsConversationsSettings = {};
/*
If external API methods are already available, use them.
*/
if (window.HubSpotConversations) {
onConversationsAPIReady();
} else {
/*
Otherwise, callbacks can be added to the hsConversationsOnReady on the window object.
These callbacks will be called once the external API has been initialized.
*/
window.hsConversationsOnReady = [onConversationsAPIReady];
}
</script>

3. Documentation

[Kumzy]

Would love the chat widget from hubspot

[SinaFaghihi]

1. Yandex.Metrica
2. The Sample script:

<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(##tag_number##, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/99290919" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->

3. Documentation for SPA

[mikenewbon]

Paddle.js

Paddle - MOR payments platform (Like lemon squeezy)

<script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>

Paddle.js Docs

[Deeyuude]

Yes Please

[Deeyuude]

Polar.js
MoR for Developpers
https://docs.polar.sh/introduction

[Kumzy]

Hubspot Calendar

Currrent implementation

<template>
<div>
<div class="meetings-iframe-container" id="hubspotCalendar" data-src="https://meetings.hubspot.com/YYY-YYY/XXX?embed=true"></div>
</div>
</template>
<script lang="ts" setup>
import { useScript } from "#imports";
useScript({
key: "hubspot-calendar",
src: "https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js",
async: true,
defer: true,
});
</script>

[dosstx]

Firebase Auth