Deployment environment variables Nuxt3 with bitbucket & docker

Had quite a few issues setting this up with our Bitbucket deployments.

Most overlooked fact was needing to prefix variables remotely with NUXT_ for private variables. And NUXT_PUBLIC_ for public variables.

For example an ENV variable needs —

NUXT_PUBLIC_FLAG_BASE_URL
&
accessed via process.env.FLAG_BASE_URL
or
process.env.flagBaseUrl

This also applies to Netlify, Vercel etc.

Environment config

(Bitbucket in this case)

// defaults.yaml.gotmpl
environment:
  variables:
    NUXT_PUBLIC_BASE_URL: https://{{ .Values.url.web }}/backend
    NUXT_PUBLIC_IMAGES_BASE_URL: https://{{ .Values.url.images }}
    NUXT_PUBLIC_TEST_MODE: true
    NUXT_TEST_MODE: false // not public

Nuxt 3 config file

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  components: [
    {
      path: '~/components',
      pathPrefix: false,
    },
  ],
  css: ['~/assets/styles/default.scss'],
    define: {
      __VUE_PROD_DEVTOOLS__: process.env.NUXT_PUBLIC_TEST_MODE,
    },
  },
  runtimeConfig: {
    app: {
      TEST_MODE: process.env.TEST_MODE,
    },
    public: {
      TEST_MODE: process.env.TEST_MODE,
      baseURL: process.env.baseURL,
      flagBaseUrl: process.env.flagBaseUrl,
      imagesBaseURL: process.env.imagesBaseURL,
    },
  },
});