I've encountered an issue while trying to access the BASE_URL from the environment in a Pinia store within Nuxt using runtimeConfig, resulting in a 500 Nuxt instance unavailable error.
Below is the error image link:
https://i.sstatic.net/hOZF7.png
Interestingly, manually setting the BASE_URL works fine, but accessing it from an environmental variable causes the error.
Here's the code snippet:
Pinia Store
// Pinia Store for Home Page
import { useRuntimeConfig } from '#app'
const BASE_URL = useRuntimeConfig().public.api_url
export const useHomeStore = defineStore('home-store', {
state: () => ({
homePageData: {}
}),
actions: {
async getHomePageData() {
this.homePageData = await $fetch(`${BASE_URL}/products`)
}
}
})
Nuxt Config
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
runtimeConfig: {
public: {
api_url: process.env.BASE_URL
}
}
})