How to use 'env' property in Nuxt.js to get newapi?

Question

I try to make news web apps to use newsapi.org. I wanted to hide my api_key so I decided to use env property in Nuxt.Js. But now I got 401 status code from server.

first of all, I made the .env file in project file and I put my API_KEY. and then I installed 'dotenv' use 'yarn add dotenv' command in VSCode terminal.

and I add nuxt.config.ts file. I have used TypeScript in my project so all file depend on TypeScript.

require('dotenv').config()
const { API_KEY } = process.env
export default {
 ~~~~~~~~~~
 env: {
    API_KEY,
  },
}

and I used Vuex to get news information. so I made code like following.

~/store/getNews.ts

import { MutationTree, ActionTree, GetterTree } from "vuex";
import axios from "axios";
const url = 'http://newsapi.org/v2/top-headlines';

interface RootState { }

export interface NewsArticles {
    source?: {}
    author?: string
    title?: string
    description?: string
    url?: any
    urlToImage?: any
    publishedAt?: string
    content?: string
}

interface State {
    newArticle: NewsArticles
}
export const state = () => ({
    newsArticle: []
})
export const getters: GetterTree<State, RootState> = {
    newsArticle: (state: State) => state.newArticle
}
export const mutations: MutationTree<State> = {
    setNewsArticle: (state: State, newsArticle: NewsArticles) => {
        state.newArticle = newsArticle
    }
}
export const actions: ActionTree<State, RootState> = {
    getNewsArticle: async ({ commit },{params}) => {
        try{
            const data = await axios.get(url,{params})
            commit('setNewsArticle', data.data.articles)
        }catch(error){
            commit('setNewsArticle',[])
        }
    }
}

export default { state, getters, mutations, actions }

and finally, I made vue file to show the news information like following.

<template>
  <div>
    <p>this is NewsApi test pages!!</p>
    <ul v-for="(item, index) in items" :key="index">
      <li>{{ item.title }}</li>
    </ul>
  </div>
</template>
<script lang="ts">
import { Component, namespace, Vue } from 'nuxt-property-decorator'
import { NewsArticles } from '~/store/getNews'
const getNews = namespace('getNews')

@Component({})
export default class extends Vue {
  @getNews.Action getNewsArticle!: Function
  @getNews.Getter newsArticle!: NewsArticles
  items: any = []
  async mounted() {
    await this.getNewsArticle({
      params: { country: 'jp', category: 'business', apiKey: process.env.API_KEY },
    })
    this.items = this.newsArticle
  }
}
</script>

I ran my app but I got 401 status code and I checked the console error like following.

{status: "error", code: "apiKeyInvalid",…}
code: "apiKeyInvalid"
message: "Your API key is invalid or incorrect. Check your key, or go to https://newsapi.org to create a free API key."
status: "error"

I don't know why that error occurred. I checked apikey correctly setting to confirm consle.log.

in index.vue

<script lang='ts'>
~~~~
export default class extend Vue{
  mounted(){
   console.log(process.env.API_KEY)
}
}
</script>

Answer 1

You don't need to call require('dotenv').config(), as Nuxt automatically invokes it.

Also, for the env vars to be available in the production build, their names must be prefixed with NUXT_ENV_ (i.e., NUXT_ENV_API_KEY). Note this allows you to keep the key from being checked into source (assuming your .env file is also kept out of source control), but your API key can still be observed in the Network tab in DevTools.