Document .env / runtimeConfig usage for all scripts

[MickL]

Most integratiosn like Cloudflare Web Analytics or Google Analytics seem to be configurable by a very convinient way using .env file and nuxt config:

export default defineNuxtConfig({
  scripts: {
    registry: {
      googleAnalytics: true,
    }
  },
  runtimeConfig: {
    public: {
      scripts: {
        googleAnalytics: {
          id: '', // NUXT_PUBLIC_SCRIPTS_GOOGLE_ANALYTICS_ID
        },
      },
    },
  },
})

However other scripts like Google Maps or Stripe require to add the key manually:

Google Maps:

<script setup lang="ts">
const { $script } = useScriptGoogleMaps({
  apiKey: 'key' // <---- This shouldnt be needed if configured in runtimeConfig 
})
// ...
</script>

Stripe:

<script setup lang="ts">
const { $script } = useScriptStripe()
onMounted(() => {
  $script.then(({ Stripe }) => {
    const stripe = Stripe('YOUR_STRIPE_KEY'); // <---- This shouldnt be needed if configured in runtimeConfig
    // ...
  })
})
// ...
</script>

Can we have all integrations configurable with .env and runtime config? Or maybe they are already but it is not documented?

[harlan-zw]

Thanks for raising this, afaik it should just work but yes it will throw a TypeScript error. This does need to be fixed, I think we'd need to do runtime type augmentation if the env is provided.

[MickL]

If it works then it is just not documentated for some integrations, maybe you got it wrong it shouldnt be a bug :) It is either a feature request or docs missing.

[harlan-zw]

I've switched this to a docs issue as the typescript issue should be fixed.

All registry scripts and components requiring any type of key should be configurable using env keys which will need to be documented.