doc: env variables

Author: harlan-zw

docs/content/scripts/content/google-maps.md

@@ -178,6 +178,34 @@ You can add markers to the static and interactive map by providing an array of `
 
 See the [markers](https://github.com/nuxt/scripts/blob/main/playground/pages/third-parties/google-maps/markers.vue) example for more information.
 
+#### With Environment Variables
+
+If you prefer to configure your API key using environment variables.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  scripts: {
+    registry: {
+      googleMaps: true,
+    }
+  },
+  // you need to provide a runtime config to access the environment variables
+  runtimeConfig: {
+    public: {
+      scripts: {
+        googleMaps: {
+          apiKey: '', // NUXT_PUBLIC_SCRIPTS_GOOGLE_MAPS_API_KEY
+        },
+      },
+    },
+  },
+})
+```
+
+```text [.env]
+NUXT_PUBLIC_SCRIPTS_GOOGLE_MAPS_API_KEY=<YOUR_API_KEY>
+```
+
 ### Guides
 
 #### Eager Loading Placeholder

docs/content/scripts/payments/paypal.md

@@ -78,3 +78,31 @@ pnpm add -D @paypal/paypal-js
 ```
 
 ::
+
+#### With Environment Variables
+
+If you prefer to configure your client ID using environment variables.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  scripts: {
+    registry: {
+      paypal: true,
+    }
+  },
+  // you need to provide a runtime config to access the environment variables
+  runtimeConfig: {
+    public: {
+      scripts: {
+        paypal: {
+          clientId: '', // NUXT_PUBLIC_SCRIPTS_PAYPAL_CLIENT_ID
+        },
+      },
+    },
+  },
+})
+```
+
+```text [.env]
+NUXT_PUBLIC_SCRIPTS_PAYPAL_CLIENT_ID=<YOUR_CLIENT_ID>
+```

docs/content/scripts/support/crisp.md

@@ -104,6 +104,34 @@ See the [Facade Component API](/docs/guides/facade-components#facade-components-
 
 See the [Config Schema](#config-schema) for full details.
 
+#### With Environment Variables
+
+If you prefer to configure your id using environment variables.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  scripts: {
+    registry: {
+      crisp: true,
+    }
+  },
+  // you need to provide a runtime config to access the environment variables
+  runtimeConfig: {
+    public: {
+      scripts: {
+        crisp: {
+          id: '', // NUXT_PUBLIC_SCRIPTS_CRISP_ID
+        },
+      },
+    },
+  },
+})
+```
+
+```text [.env]
+NUXT_PUBLIC_SCRIPTS_CRISP_ID=<YOUR_ID>
+```
+
 ### Events
 
 The `ScriptCrisp` component emits a single `ready` event when crisp is loaded.

docs/content/scripts/support/intercom.md

@@ -87,6 +87,34 @@ See the [Facade Component API](/docs/guides/facade-components#facade-components-
 
 See the [Config Schema](#config-schema) for full details.
 
+#### With Environment Variables
+
+If you prefer to configure your app ID using environment variables.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  scripts: {
+    registry: {
+      intercom: true,
+    }
+  },
+  // you need to provide a runtime config to access the environment variables
+  runtimeConfig: {
+    public: {
+      scripts: {
+        intercom: {
+          app_id: '', // NUXT_PUBLIC_SCRIPTS_INTERCOM_APP_ID
+        },
+      },
+    },
+  },
+})
+```
+
+```text [.env]
+NUXT_PUBLIC_SCRIPTS_INTERCOM_APP_ID=<YOUR_APP_ID>
+```
+
 ### Events
 
 The `ScriptIntercom` component emits a single `ready` event when Intercom is loaded.