How to get access to privateRuntimeConfig for use with the nuxt/axios module

Viewed 385

my nuxt.config:

publicRuntimeConfig: {
  axios: {
    baseURL: process.env.API_URL, // where API_URL=https://some3rdpartyapi.com
  },
},
privateRuntimeConfig: {
  apiToken: process.env.API_TOKEN,
},

I want to periodically hit a 3rd party API like so:

export default {
  data() {
    return {
      myList: [],
      timer: null,
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  created() {
    this.$axios.setToken(this.$config.apiToken, 'Bearer')
    this.fetchList()
    this.timer = setInterval(() => {
      this.fetchList()
    }, 60000)
  },
  methods: {
    async fetchList() {
      try {
        const list = await this.$axios.$get('/list')
        this.myList = list
      } catch (error) {
        console.log(error.response)
      }
    },
  },
}

but the privateRuntimeConfig is not available to the client and I get undefined for this.$config.apiToken...do you call setToken before every .$get or can you call it just once in somewhere like created()? I'm trying to wrap my head around axios+runtime config+ssr. This is for local development, I have my target in nuxt.config as static so when I deploy to production it will be a static site.

Should I be calling $axios.setToken in a server-side area, like middleware? Would I have access to private config there? I'm not sure how to approach this issue.

0 Answers
Related