Third-parties module

[housseindjirdeh]

Note: The @nuxt/scripts RFC is a work in progress that aims to introduce script presets for popular third-parties. This RFC discusses a similar idea from the Chrome Aurora team, and it is likely that the two projects will be merged once the RFC is published.

Goal

Improve the user and developer experience of loading popular third-party libraries in a Nuxt application.

Background

91% of Nuxt websites load at least one third-party resource. By providing Nuxt developers with a module that contains a focused set of third-party components, we can:

• Simplify the developer experience of loading popular third-party resources
• Ensure that popular third-party resources are loaded efficiently and continue to do so as best practices evolve (e.g. wrapped inside client-only components)
• Provide more third-party specific warnings and errors (e.g. if a critical property or attribute is missing for a particular third-party script, an ESLint warning or error can be surfaced)

Proposal

We put together a Nuxt module that introduces “wrapper components” to simplify the process of loading popular third-party scripts. It can be installed and included into the config just like any other module:

yarn add --dev @nuxt/third-parties

export default defineNuxtConfig({
  modules: [
    '@nuxt/third-parties',
  ]
})

And that’s it! Users can now use a number of different components to load certain third-parties as optimally as possible, such as <nuxt-google-analytics>, <nuxt-youtube-embed>, and <nuxt-google-maps-embed>.

<template>
  <div>
    <h1>This page has Google Analytics included!</h1>
    <nuxt-google-analytics id=”XX-XXX-XXXX” />
  </div>
</template>

Maintenance

One of the issues of managing third-party code in a centralized module is dealing with the maintenance burden. Maintainers of @nuxt/third-parties will have to continuously monitor and update underlying loading techniques as the third-parties themselves change and adapt to newer web practices.

To solve this, and to prevent duplicating identical loading recommendations for the same third-parties in different places, the Chrome Aurora team is working on Third Party Capital, an NPM library that consolidates best practices for popular third-parties in a single place. For Nuxt, we have the option of either relying on this library or creating entirely custom components (or using either of the two approaches depending on the resource itself).

Risks and Considerations

Some risks and considerations that need to be taken into account:

• An RFC for a @nuxt/scripts module is in progress and we may want to consider supporting third-party wrappers via Third Party Capital within this module instead.
• Some third-parties, like Google Analytics, may be better suited as a configuration option rather than a component. We may want to consider providing configuration properties for certain third-parties in addition to providing UI components for others.
• For some third-parties, Nuxt community members have already created specific modules to make it easier to include (e.g. @nuxt/google-analytics). Should we try to improve these modules upstream instead of creating a single third-parties module? Can/should we do both?.

Selection

For the initial rollout of @nuxt/third-parties, we suggest supporting a small number of popular third-parties whose performance can be improved by using an alternative method of loading than the general recommended practice. Some examples that have already been included in Third Party Capital:

Google Analytics

56% of Nuxt applications use Google Analytics. The latest version, which must be used from July 1, 2023 onwards, requires users to fetch an 80 kB gtag.js script. A <nuxt-google-analytics> component could automatically offload this to a web worker.

YouTube Embed

YouTube resources are one of the most popular render-blocking third-parties on the web today. A <nuxt-youtube-embed> component could leverage the techniques used in lite-youtube-embed to load embedded videos significantly faster.

Google Maps

10% of Nuxt applications use Google Maps which is also one of the most popular render-blocking third-parties on the web. A <nuxt-google-maps-embed> component could automatically include the loading=”lazy” property to ensure that it is only loaded when it is close to the device viewport.

These are only some examples of third-parties that we think developers can benefit from using a framework wrapper. The inclusion of other third-party resources widely used by Nuxt developers will always be considered.

[Hebilicious]

Very insightful post. I didn't know about Third party Capital, but I feel like this post should mention Partytown and its Nuxt module.

[webselect]

Just saw your live, https://partytown.builder.io/nuxt is probably something you want to look up

[husayt]

@housseindjirdeh if I remember correctly you announced at Vue Amsterdam two weeks ago that nuxt integrations package was about to be released in coming days. Did I miss it or it is still yet to come?
Thanks