Encountered a challenge with updating variables in runtimeConfig that rely on environment variables.
When the application is built with values from the .env file like:
API_URL=localhost:3000
The console displays localhost:3000.
However, upon stopping the application, modifying the value in the .env file to:
API_URL=localhost:1234
And restarting the application, the console still shows localhost:3000.
Why didn't the runtimeConfig values update? This functionality worked flawlessly in Nuxt 2 but appears to be malfunctioning in Nuxt 3.
.env
API_URL=localhost:3000
nuxt.config.js
import svgLoader from 'vite-svg-loader';
const APP_HOST = process.env.API_URL
const BASE_URL = `https://${APP_HOST}`;
export default defineNuxtConfig({
devtools: {
enabled: true,
},
telemetry: false,
test: true,
app: {
baseURL: '/fe',
},
build: {
transpile: ['primevue'],
},
css: [
'@@/assets/scss/base.scss',
],
vite: {
plugins: [
svgLoader({
defaultImport: 'component',
}),
],
},
modules: [
'@nuxtjs/eslint-module',
// '@nuxtjs/stylelint-module',
'@vueuse/nuxt',
'@pinia/nuxt',
'@bootstrap-vue-next/nuxt',
// 'pinia-plugin-persistedstate',
],
imports: {
dirs: ['./const', './const/paths'],
},
components: [
{
path: './components',
pathPrefix: false,
extensions: ['.vue'],
},
],
runtimeConfig: {
public: {
http: {
baseURL: BASE_URL,
},
},
},
});
Login.vue
<template>
<div>LOGIN</div>
</template>
<script lang="ts" setup>
const runtimeConfig = useRuntimeConfig();
const baseURL = runtimeConfig.public.http.baseURL;
onMounted(() => {
console.log('runtimeConfig', baseURL);
console.log('runtimeConfig', runtimeConfig);
});
</script>