I have set environment variables in AWS Amplify, with the VUE_APP_ prefix, but they aren't loading on production. Locally, they're pulled in fine from a .env file.
Here's an example of a variable in Amplify:
And here's where I'm using it in app.vue:
seoMeta(
`${import.meta.dev ? '(Local) ' : ''} ${process.env.VUE_APP_META_TITLE}`,
process.env.VUE_APP_META_DESCRIPTION,
process.env.VUE_APP_META_IMAGE
);
However, I have found that the variables are imported fine inside nuxt.config.js:
$production: {
scripts: {
registry: {
googleAnalytics: true
}
},
runtimeConfig: {
public: {
scripts: {
googleAnalytics: {
id: process.env.VUE_APP_GOOGLE_TAG_ID
},
},
},
}
},
So it's just loading inside the component that's causing an issue.
Is there something else I need to do to wire it all up?