Why Aren't Amplify Environment Variables Loading in My Vue/Nuxt Component in Production?

It looks like the issue isn’t with Amplify per se but with how environment variables are injected into your client-side bundle at build time. Depending on your setup, you might need to adjust how you reference and configure these variables:

If You’re Using Vite

When using Vite, only environment variables that start with VITE_ are exposed to your client-side code. In your component you’re using process.env.VUE_APP_META_TITLE, which won’t be replaced at build time because it doesn’t match the required VITE_ prefix. To fix this, you can do one of the following:

1. Rename Your Environment Variables: Change your variable names to use the VITE_ prefix (e.g., VITE_META_TITLE). Then, access them in your code via:

   JSCopied
   seoMeta(
     `${import.meta.dev ? '(Local) ' : ''} ${import.meta.env.VITE_META_TITLE}`,
     import.meta.env.VITE_META_DESCRIPTION,
     import.meta.env.VITE_META_IMAGE
   );

2. Configure Vite to Expose Other Variables: While it’s more common—and recommended—to use the VITE_ prefix, you could adjust Vite’s configuration to expose additional variables. However, this isn’t standard and might lead to confusion later.

If You’re Using Nuxt

Since you mentioned that your variables load correctly inside your nuxt.config.js (via the runtimeConfig), it means they’re available at build time, but the way you’re accessing them in your component is different. In Nuxt, it’s a best practice to use the runtime configuration for any variables that need to be accessed on the client side. For example, with your config:

JSCopied
// nuxt.config.js
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      metaTitle: process.env.VUE_APP_META_TITLE,
      metaDescription: process.env.VUE_APP_META_DESCRIPTION,
      metaImage: process.env.VUE_APP_META_IMAGE,
      googleTagId: process.env.VUE_APP_GOOGLE_TAG_ID,
    }
  }
});

Then, in your components you can access them via Nuxt’s useRuntimeConfig:

VUECopied
<script setup>
const config = useRuntimeConfig();

seoMeta(
  `${process.dev ? '(Local) ' : ''}${config.public.metaTitle}`,
  config.public.metaDescription,
  config.public.metaImage
);
</script>

Summary

• Vite: Use the VITE_ prefix and access using import.meta.env.
• Nuxt: Leverage the runtime configuration (publicRuntimeConfig) and access with useRuntimeConfig.

Adjusting your approach based on your build tool should resolve the issue of environment variables not loading in production.