useWoosmapScript

Description

The useWoosmapScript composable provides a simple utility to load the Woosmap SDK script dynamically into a Nuxt application. It integrates with the useScript function to include the map SDK with an API key from the runtime config and supports additional script loading options.

FEATURE GOALS

• Dynamically load the Woosmap SDK script with an API key.
• Simplify the integration of Woosmap maps into Nuxt applications. -Provide an option to pass custom script loading options for flexibility.

FEATURE EXPECTATIONS

• Loads the Woosmap script with the API key from the runtime config (public.woosmapApiKey).
• Supports optional script loading options via the useScript function.
• Prevents execution on the server-side using import.meta.client to check the environment.

DEV STRATEGIES

1. Composables Logic

const woosmapScript = useWoosmapScript({
  async: true,
  defer: true,
});

• Loads the Woosmap SDK script with custom options (e.g., async, defer).
• Responsible for rendering "map" in the frontend (https://developers.woosmap.com/js-samples/add-map/)
• Can be used in Vue components to initialize the map SDK when needed.

2. Implementation

import type { NuxtUseScriptOptions } from "#nuxt-scripts";

export function useWoosmapScript(scriptOptions?: NuxtUseScriptOptions) {
  if (!import.meta.client) return;

  const runtimeConfig = useRuntimeConfig();

  const woosmapScriptSource = `https://sdk.woosmap.com/map/map.js?key=${runtimeConfig.public.woosmapApiKey}&callback=initMap`;

  const woosmapScript = useScript(woosmapScriptSource, scriptOptions);

  return woosmapScript;
}

• Dynamically generates the Woosmap SDK URL with the API key from runtimeConfig.
• Uses useScript to inject the script into the page with custom options.

3. DEFAULT BEHAVIOR

FLOW SUMMARY

• Checks if the environment is client-side (import.meta.client).
• Builds the Woosmap SDK URL dynamically using the API key from the runtime config.
• Loads the script asynchronously using the useScript function, with optional customization via scriptOptions.