axios + vercel + servermiddleware issue

hi,

there is no way i can find a good solution to make the api url work well.

my vercel.json: https://github.com/nuxt/now-builder/blob/master/examples/basic/now.json

my nuxt.config.js:

export default {
	serverMiddleware: [
		{
			path: '/api/test',
			handler: '~/server-middleware/test.js'
		}
	]
}

my /server-middleware/test.js:

const json = JSON.stringify({
	status: 'hello'
})
export default (req, res) => {
	res.writeHead(200, {'Content-Type': 'application/json'}).end(json)
}

my /pages/index.vue:

<template>
	<div>
		<p v-if="$fetchState.pending">Fetching posts...</p>
		<p v-else-if="$fetchState.error">Error while fetching posts: {{ $fetchState.error.message }}</p>
		<h1>Works! {{ status }}</h1>
	</div>
</template>

<script>
export default {
	async fetch () {
		this.status = await this.$axios.$get('/api/test')
	},
	data () {
		return {
			status: {}
		}
	}
}
</script>

after deploy, you always want to get it at http://127.0.0.1/api/test.

how can i specify that the vercel url be the api url? what is the good solution for this? i tried process.env.VERCEL_URL too but it didn’t work.

of course api is good in local environment, it works.

thanks for the help

[zernonia]

You can easily setup with these config :

VERCEL_URL = "https//example.now.sh"

env: {
    baseUrl: process.env.VERCEL_URL || 'http://127.0.0.1:3000'
  },

then simply

modules: [
    ['@nuxtjs/axios', { baseURL: process.env.baseUrl }],
  ],

[danielroe]

Hopefully this explanation might be helpful.

@kukac7 System environment variables work just fine.