How to access environment variables in a .js file in Nuxt

Question

I have the following files:

// nuxt.config.js
import { locales } from './services/i18n'
...
    i18n: {
        lazy: true,
        langDir: '~/locales/',
        defaultLocale: 'en',
        detectBrowserLanguage: false,
        differentDomains: true,
        locales,
        vueI18n: {
            fallbackLocale: 'en'
        }
    },
    publicRuntimeConfig: {
        ...
        subDomain: process.env.SUB_DOMAIN,
    },
...

// services/i18n/index.js
export const locales = [
    {
        code: 'ar',
        iso: 'ar',
        file: 'ar.json',
        dir: 'rtl',
        domain: `${process.env.SUB_DOMAIN}.example.ae`,
        name: 'العَرَبِيَّة',
        enName: 'Arabic',
        defaultLanguage: true,
        languages: ['ar']
    },
    {
        code: 'bg',
        iso: 'bg',
        file: 'bg.json',
        dir: 'ltr',
        domain: `${process.env.SUB_DOMAIN}.example.bg`,
        name: 'Български',
        enName: 'Bulgarian',
        defaultLanguage: true,
        languages: ['bg']
    },
    ...
]

The problem is that process.env.SUB_DOMAIN seems to be undefined in /services/i18n/index.js, although it is set because the same variable is not undefined in nuxt.config.js. I know that nuxt is exposing the values of publicRuntimeConfig as $config, however, $config is not accessible in /services/i18n/index.js. It might work if I would move locales to nuxt.config.js, but I don't want to do that because it would worsen the readability of the config file.

So my question is what the best approach would be to get subdomain inside /services/i18n/index.js.

kissu · Accepted Answer · 2021-05-13 16:44:46Z

1

EDIT: A great answer was given on Nuxtjs' discussions by Alexander Lichter: https://github.com/nuxt/nuxt.js/discussions/9289#discussioncomment-729801

// nuxt.config.js
import { locales } from './services/i18n'
...
    i18n: {
        lazy: true,
        langDir: '~/locales/',
        defaultLocale: 'en',
        detectBrowserLanguage: false,
        differentDomains: true,
        locales: locales(process.env.SUB_DOMAIN),
        vueI18n: {
            fallbackLocale: 'en'
        }
    },
    publicRuntimeConfig: {
        ...
        subDomain: process.env.SUB_DOMAIN,
    },
...

// services/i18n/index.js
export const locales = domain => [
    {
        code: 'ar',
        iso: 'ar',
        file: 'ar.json',
        dir: 'rtl',
        domain: `${domain}.example.ae`,
        name: 'العَرَبِيَّة',
        enName: 'Arabic',
        defaultLanguage: true,
        languages: ['ar']
    },
    {
        code: 'bg',
        iso: 'bg',
        file: 'bg.json',
        dir: 'ltr',
        domain: `${domain}.example.bg`,
        name: 'Български',
        enName: 'Bulgarian',
        defaultLanguage: true,
        languages: ['bg']
    },
    ...
]

edited May 13, 2021 at 16:44

answered May 12, 2021 at 8:27

kissu

47.3k16 gold badges94 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

kissu Over a year ago

Maybe try to ask this question on the new related github discussions here: github.com/nuxt/nuxt.js/discussions

rrrm93 Over a year ago

How would you suggest doing this with the file you just want to share env with for example, I have a constant.js file export const BASE_URL = process.env.BASE_URL my process.env is undefined but in nuxt.config they are all there and I can use them across plugins, middlewares, and so on

kissu Over a year ago

@rrrm93 a full brand new question with some details would be welcome here!

rrrm93 Over a year ago

stackoverflow.com/questions/75940172/… posted

Collectives™ on Stack Overflow

How to access environment variables in a .js file in Nuxt

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related