plugin-nuxt does not resolve runtimeConfig values

[yshrsmz]

Describe the bug

I'm using Nuxt 3.3.1

Say I have a following runtimeConfig declaration in nuxt.config.ts

    runtimeConfig: {
        public: {
            testKey: 'test_value',
            apiKey: '',
            environment: ''
        }
    },

apiKey and environment value is injected from .env

And I have a following component which renders runtimeConfig content

<script setup>
/* eslint-disable no-undef */
console.log('useNuxtApp', useNuxtApp())
console.log('useNuxtApp().$config', useNuxtApp().$config)
const config = useRuntimeConfig()
console.log('useRuntimeConfig', config)
</script>

<template>
    <div>
        <h3>Nuxt runtime config</h3>
        <pre>{{ config }}</pre>
    </div>
</template>

This component renders runtimeConfig properly when rendered in Nuxt dev server.

Nuxt runtime config
{
  "public": {
    "testKey": "test_value",
    "apiKey": "api_key_value",
    "environment": "development"
  },
  "app": {
    "baseURL": "/",
    "buildAssetsDir": "/_nuxt/",
    "cdnURL": ""
  }
}

but it doesn't when rendered by Histoire.

Nuxt runtime config
{
  "public": {},
  "app": {
    "baseURL": "/"
  }
}

Reproduction

https://github.com/yshrsmz/histoire-nuxt-repro1

I followed the nuxt official instruction, so should be a minimal repro.

System Info

System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 831.92 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.14.2 - ~/.anyenv/envs/nodenv/versions/18.14.2/bin/node
    Yarn: 1.22.19 - ~/.anyenv/envs/nodenv/versions/18.14.2/bin/yarn
    npm: 9.5.0 - ~/.anyenv/envs/nodenv/versions/18.14.2/bin/npm
  Browsers:
    Brave Browser: 111.1.49.120
    Chrome: 111.0.5563.64
    Safari: 16.3
  npmPackages:
    @histoire/plugin-nuxt: ^0.15.9 => 0.15.9 
    @histoire/plugin-vue: ^0.15.8 => 0.15.8 
    histoire: ^0.15.9 => 0.15.9

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[itechKaitoQueiroz]

If you need a workaround I found the following solution:

1. Add a setup file to your histoire.config.ts

import { defineConfig } from 'histoire'
import { HstVue } from '@histoire/plugin-vue'
import { HstNuxt } from '@histoire/plugin-nuxt'

export default defineConfig({
...
setupFile: './histoireSetup.ts',
})

2. In histoireSetup.ts you add the following:

import { NuxtApp } from '#app'
import { getContext } from 'unctx'

const nuxtAppCtx = getContext('nuxt-app')
const nuxt = Object.assign({}, nuxtAppCtx.tryUse()) as NuxtApp

nuxt.$config = {
  public: {
    testKey: 'test_value',
    apiKey: 'api_key_value',
    environment: 'development'
  }
}

nuxtAppCtx.set(nuxt)

I hope that helps :)

[positiveprogrammer]

I tried this workaround, but it didn't help. Any other idea to resolve this issue?

[itechKaitoQueiroz]

@positiveprogrammer are you using the most recent version?

[positiveprogrammer]

@positiveprogrammer are you using the most recent version?

Yes, I'm on the most recent version of Nuxt, Histoire, histoire/plugin-nuxt :-)

[positiveprogrammer]

I found a workaround for this issue. I successfully override manually runtime config in the setupVue3, something like below.

useRuntimeConfig().public.someKey = someValue

I hope this workaround can help some use cases.