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.