cannot access env inside nuxt.config.js

Question

I am using Nuxt v2.12.2 in SPA mode and want to use env variables within the default head. I am using @nuxtjs/dotenv however when the page is rendered the baseUrl is undefined.

I am able to access BaseUrl from within page layouts fine, but not from within nuxt.config.js like below.

.env

BASE_URL=https://example.com

nuxt.config.js

const env = import('dotenv')
env.config()

export default {
  mode: 'spa',

  generate: {
    fallback: true
  },

  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  },

  head: {
    meta: [
      {
        hid: 'og:image',
        name: 'og:image',
        content: process.env.baseUrl + '/og/facebook.png'
      }
    ],
  },

  modules: [
    '@nuxtjs/dotenv'
  ]

  ...
}

tony19 · Accepted Answer · 2021-02-18 11:53:27Z

3

process.env.baseUrl is not yet set when the head property is set.

One solution is to use a function for head, which would be run after the env is setup:

export default {
  head() {
    return {
      title: this.$route?.title,
      meta: [
        {
          hid: 'og:image',
          name: 'og:image',
          content: process.env.baseUrl + '/og/facebook.png'
        }
      ]
    }
  }
}

edited Feb 18, 2021 at 11:53

answered Jul 10, 2020 at 2:55

tony19

140k23 gold badges281 silver badges354 bronze badges

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

2 Comments

Simon Over a year ago

Is there a way to access $route inside head() in the nuxt.config.js? eg content: process.env.baseUrl + this.$route.path

tony19 Over a year ago

@Simon Yes, use a normal function instead, which would let you do content: process.env.baseUrl + this.$route?.path. See updated answer.

Kim · Accepted Answer · 2021-08-04 15:10:13Z

0

The solution above (using a function for the head) didn't work for me, but this did:

https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-env

If you use NUXT_ENV_ then the env variables are available at build time and can be used in the head!

answered Aug 4, 2021 at 15:10

Kim

413 bronze badges

Collectives™ on Stack Overflow

cannot access env inside nuxt.config.js

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related