š This document provides technical details of installing the PageWorkers tag on websites built with the Nuxt.js framework.
Overview
Nuxt.js is a popular Vue.js-powered framework used to create SPA web apps that support SSR. Before reading this article, read Tech Notes: Installing the PageWorkers Tag to learn best practices for loading the PageWorkers tag on your website.
The latest version of Nuxt.js at the time of this documentation is Nuxt 3.12.
There are two methods for installing the PageWorkers tag on Nuxt.js frameworks:
ā ļø For all installation methods, load your tag using both properties:
body: true(Or append it directly to the documentās body as in the ācustom pluginā solution below)async: true
In compliance with our recommendations, the async property will guarantee the PageWorkers tag will not impact firing of DOMContentLoaded. The body property will append the PageWorkers tag to the documentās body instead of the head. This allows Nuxt libraries to fully load and render the page before executing PageWorkers, limiting the risk of conflicts between your page JS hydration and PageWorkersā optimizations.
Recommended Installation: Global Scope
š Recommendation Summary
On Nuxt3, insert the tag script at the top level app.vue file of your application to be available for the entire website and use the following:
useHeadcomposable function to insert script into your documentās head.async: trueproperty.body: trueproperty.
To load the PageWorkers tag for your entire website, load it at your applicationās topmost level.
Select the recommended installation method based on your Nuxt version:
Nuxt3 Method: useHead Composable
ā ļø This method is not available on Nuxt versions lower than Nuxt3.
In a typical Nuxt.js application, the topmost level should be a file named app.vue:
Load the tag using the Nuxt.js built-in composable API useHead within the component setup:
š Use both async: true and body: true properties to load the PageWorkers tag dynamically into the documentās body.
This is all that is required to load the tag directly into your Nuxt3 application.
š” Your tag will be loaded upon landing on any website page but will not be re-executed on navigation.
Nuxt2 Method: nuxt.config.ts
Set up your script in your next.config.ts directly as shown below.
š Use both async: true and body: true properties to load the PageWorkers tag dynamically into the documentās body.
āNuxt2 and Above Method: Custom Plugin
Follow these steps to create a custom Nuxt plugin to inject the PageWorkers script into your application:
1. Create a plugin to inject the PageWorkers tag.
š We check process.client to ensure the script is only executed on the client side, as PageWorkers is not compatible with server-side execution.
š The body: true property no longer applies since you specify the script should be appended to the body directly.
2. Use the plugin in your next.config.js file.
š mode: 'client' registers the plugin on the client side only since PageWorkers is incompatible with server-side execution.
Alternate Installation: Local Scope
If you know with absolute certainty the tag should only be loaded on a specific subset of your pages, you may insert it on specific pages only.
Select the alternate installation method based on your Nuxt version:
Nuxt3 Method: useHead Composable
Use the useHead composable directly in a page setup, as in the example below, where the tag is loaded only on Category pages:
Nuxt2 Method: defineComponent
On Nuxt2, include the tag on any page using the defineComponent API from vue, as shown below:
š With the alternate installation, the tag will only be loaded when first landing on a page where the tag is explicitly injected, whether the user lands directly on the page or comes from in-app navigation. However, regardless of the landing source, the tag will only be loaded and executed once and will not be re-executed on subsequent navigation, even on other category pages.