useExponeaScript

Description

The useExponeaScript composable dynamically injects the Exponea (or any third-party) script into a Nuxt application, while optionally binding a customer ID for tracking purposes. It uses the useScript utility from the #nuxt-scripts module and integrates with the authentication store to retrieve either a logged-in user ID or a guest ID. This composable ensures that the script is only injected on the client side and supports custom script options.

FEATURE GOALS

• Dynamically inject an external script (e.g., Exponea) into the page.
• Automatically include the customer ID from either authenticated or guest users.
• Support optional script attributes and configuration via NuxtUseScriptOptions.
• Ensure safe execution on the client side only.

FEATURE EXPECTATIONS

• Script will only be loaded in the browser environment (import.meta.client).
• Pulls user or guest ID from the authentication store and assigns it as a data-customer-id attribute.
• Accepts optional NuxtUseScriptOptions for advanced control (e.g., async, defer, type).
• Returns the result of useScript, which can be used to track script loading status.

DEV STRATEGIES

1. Composables Logic

const exponeaScript = useExponeaScript("https://cdn.exponea.com/script.js", {
  async: true,
  defer: true
});

// Script will be appended to the document with customer ID if available
watch(exponeaScript.status, (status) => {
  if (status === 'loaded') {
    console.log("Exponea script loaded successfully!");
  }
});

• The composable determines the proper customer ID based on authentication status.
• It constructs the baseConfig for useScript, including the script src, id, and optionally, a data-customer-id attribute.

2. COMPOSABLE STRUCTURE

useExponeaScript(
  scriptSource: string,
  scriptOptions?: NuxtUseScriptOptions
): ReturnType<typeof useScript>

3. DEFAULT BEHAVIOR

4. ERROR RESPONSE STRUCTURE

• If run on the server (!import.meta.client), the composable exits early without loading the script.
• Errors during script injection (e.g., network failure) are handled internally by useScript, which exposes a reactive status.

{
  status: 'idle' | 'loading' | 'loaded' | 'error',
  error?: Error
}

FLOW SUMMARY

• The composable checks if it's executing on the client side.
• It retrieves the customerId from either the authenticated user or guest.
• Constructs a configuration object including the script source, a unique ID, and optionally the customer ID.
• Uses Nuxt’s useScript utility to inject the script with the defined configuration.
• Returns the reactive script status, allowing the developer to react to the script’s loading lifecycle.