Nuxt 3 Runtime config values are not replaced by env variables after rerun

Question

I encountered an issue with updating variables in runtimeConfig that depend on environment variables.

If I build my application with values in the .env file like this:

API_URL=localhost:3000

I can see localhost:3000 in the console.

After stopping the application, changing the value in the .env file to:

API_URL=localhost:1234

And then restarting the application, I still see localhost:3000 in the console.

Why didn't the runtimeConfig values update? This used to work perfectly in Nuxt 2 but doesn't seem to work 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>