Nuxt.jsでenvファイルを読み込んでもundefined となってしまいます

Nuxt.jsでdotenvを使用して.envファイルを読み込もうとしていますが、うまく読み込めません。

現状はプロジェクト直下に.envファイルを作成して　CTF_SPACE_ID = "aaaaa"　と記述しています。
そして確認の為にpages/index.vue で console.log(process.env.CTF_SPACE_ID);と入れてもundefined となります。

package.jsonには "dotenv": "^8.2.0",の記載があるので、インストールはされています。

nuxt.config.js には以下の様に記述しています。

JavaScript
1require('dotenv').config()
2
3function getValidConfig (configEnv, keys) {
4  let {config, missingKeys} = keys.reduce((acc, key) => {
5    if (!configEnv[key]) {
6      acc.missingKeys.push(key)
7    } else {
8      acc.config[key] = configEnv[key]
9    }
10    return acc
11  }, {config: {}, missingKeys: []})
12
13  if (missingKeys.length) {
14    throw new Error(`Contentful key is missing : ${missingKeys.join(', ')}`)
15  }
16  return config
17}
18
19module.exports = {
20  getConfigForKeys (keys) {
21    const configEnv = {
22      CTF_BLOG_POST_TYPE_ID: process.env.CTF_BLOG_POST_TYPE_ID,
23      CTF_SPACE_ID: process.env.CTF_SPACE_ID,
24      CTF_CDA_ACCESS_TOKEN: process.env.CTF_CDA_ACCESS_TOKEN
25    }
26    return getValidConfig(configEnv, keys)
27  }
28}
29
30env: {
31  CTF_SPACE_ID: ctfConfig.CTF_SPACE_ID,
32  CTF_CDA_ACCESS_TOKEN: ctfConfig.CTF_CDA_ACCESS_TOKEN,
33  CTF_BLOG_POST_TYPE_ID: ctfConfig.CTF_BLOG_POST_TYPE_ID
34  }