Nuxt/docs/1.getting-started/5.third-parties.md

title	description	navigation.icon
Third Parties	Learn how to optimize the performance of third-party resources using built-in composables and components.	i-ph-users-duotone

Nuxt provides a number of composables and built-in libraries that make it easier -- and faster -- to load third-party resources in your application.

• useScript: Load any third-party script with server-side rendering support and a proxied API.
• useStyles: Load any third-party stylesheet using various asset strategies.
• Third-Party Wrappers: Wrapper components and composables that make it easier to include different popular third parties efficiently.

How Third Parties Can Impact User Experience

Third parties are external resources included, but not directly controlled, by a site owner to add new functionality to a website. Popular examples of third parties include analytics, video embeds, maps, and social media integrations. Typically, third-party providers offer code snippets that can be added to the head or body section of the document.

Adding a single third-party resource to your Nuxt application might not have any noticeable impact on performance, but it can quickly begin to affect user experience if you’re not careful. Many third parties, especially scripts, can take a relatively long time to download and execute, which can delay user interactivity and block page rendering.

Data from the Chrome User Experience Report shows that Nuxt sites that load more third-party resources have lower Interaction to Next Paint (INP) and Largest Contentful Paint (LCP) pass rates.

_{source: Chrome User Experience Report, date: October 2023, devices: phone}

While the chart's correlation does not automatically indicate causation, lab experiments and data from the Web Almanac provide further evidence that third-party resources significantly affect page performance.

Optimizing Third Party Performance

In general, it can be difficult to determine the most optimal way to load different third-party resources. Nuxt provides a number of utilities to improve both the developer and user experience of loading third parties.

::callout If you're using very popular third-party libraries, please check the Third-Party Wrappers section for available pre-configured solutions. ::

useScript

The useScript composable enables you to load third-party scripts with SSR support and a proxied API. It works out of the box, requiring just a URL that points to the script resource.

<script setup lang="ts">
useScript({
  src: 'https://www.example.com/script.js'
})
</script>

Optional triggers and asset strategies can be used to allow for more fine-grained control over how, and when, the script should be loaded. In the following example, the script will load once the promise provided in the trigger resolves (1 second later).

<script setup lang="ts">
useScript({
  src: 'https://www.example.com/script.js',
  trigger: new Promise((resolve) => {
    setTimeout(() => { resolve() }, 1000)
  })
})
</script>

:read-more{to="https://unhead.unjs.io/usage/composables/use-script "}

Third-Party Wrappers

Nuxt provides a collection of utilities that are already configured to load and initialize popular third parties in the most performant way. These include:

• Composables to fetch scripts such as useGoogleAnalytics and useGoogleTagManager
• Components to load embeds such as <GoogleMaps> and <YoutubeEmbed>

Google Analytics

The useGoogleAnalytics composable allows you to integrate Google Analytics in your Nuxt application.

<script setup lang="ts">
useGoogleAnalytics({
  id: 'GA-123456789-1'
})
</script>

:read-more{to="/docs/api/composables/use-google-analytics"}

Google Tag Manager

The useGoogleTagManager composable makes it easier to include Google Tag Manager in your Nuxt application.

<script setup lang="ts">
useGoogleTagManager({
  id: 'GTM-ABCD12'
})
<script>

:read-more{to="/docs/api/composables/use-google-tag-manager"}

Google Maps

The <GoogleMaps> component initializes and displays a Google Map on your page using the Maps JavaScript API.

​​<template>
  <div>
    <GoogleMaps
      api-key="API_KEY"
      q="Space+Needle,Seattle+WA"
    />
  </div>
</template>

:read-more{to="/docs/api/components/google-maps"}

YouTube Embed

The <YoutubeEmbed> component uses lite-youtube-embed under the hood to load and display a YouTube embed on your page faster.

​​<template>
  <div>
    <YoutubeEmbed
      video-id="d_IFKP1Ofq0"
      play-label="Play Video"
    />
  </div>
</template>

:read-more{to="/docs/api/components/youtube-embed"}