fix(plugin-nuxt): remove useNuxtApp mock in nuxt plugin preventing some behaviors (fix #703)

[juleshry]

Description

This PR fixes the issue #703. This bug comes from the useNuxtApp that is mocked in /packages/histoire-plugin-nuxt/runtime/composables.mjs
It just removes this mock to use the useNuxtApp version from Nuxt. It allows some plugins that requires data from useNuxtApp to run correctly (e.g. @nuxtjs/i18n).

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the Commit Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[netlify]

✅ Deploy Preview for histoire-examples-svelte3 ready!

Name	Link
🔨 Latest commit	5cd8fd6
🔍 Latest deploy log	https://app.netlify.com/sites/histoire-examples-svelte3/deploys/66a0b91812e8fc0008ffc657
😎 Deploy Preview	https://deploy-preview-710--histoire-examples-svelte3.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for histoire-controls ready!

Name	Link
🔨 Latest commit	5cd8fd6
🔍 Latest deploy log	https://app.netlify.com/sites/histoire-controls/deploys/66a0b918085236000875337a
😎 Deploy Preview	https://deploy-preview-710--histoire-controls.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for histoire-examples-vue3 ready!

Name	Link
🔨 Latest commit	5cd8fd6
🔍 Latest deploy log	https://app.netlify.com/sites/histoire-examples-vue3/deploys/66a0b91820e5c2000909baed
😎 Deploy Preview	https://deploy-preview-710--histoire-examples-vue3.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for histoire-site ready!

Name	Link
🔨 Latest commit	5cd8fd6
🔍 Latest deploy log	https://app.netlify.com/sites/histoire-site/deploys/66a0b918405d2e0008dac751
😎 Deploy Preview	https://deploy-preview-710--histoire-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[gjeusel]

Hey there ! I believe there must be a reason why the author decided to entirely mock the useNuxtApp (altough I don't understand it).
Entirely removing the mocked useNuxtApp make histoire fail on my side, not at nuxt build time, but at runtime with a Failed to fetch dynamically imported module from @histoire/plugin-vue.

Maybe a better solution might be to just inline the actual nuxt config in the useNuxtApp composable ?

diff --git a/packages/histoire-plugin-nuxt/runtime/composables.mjs b/packages/histoire-plugin-nuxt/runtime/composables.mjs
deleted file mode 100644
index 9b9a4d8..0000000
--- a/packages/histoire-plugin-nuxt/runtime/composables.mjs
+++ /dev/null
@@ -1 +0,0 @@
-export const useNuxtApp = () => ({ runWithContext: async fn => await fn() })
diff --git a/packages/histoire-plugin-nuxt/src/index.ts b/packages/histoire-plugin-nuxt/src/index.ts
index b284eea..ca3cc8f 100644
--- a/packages/histoire-plugin-nuxt/src/index.ts
+++ b/packages/histoire-plugin-nuxt/src/index.ts
@@ -135,7 +135,17 @@ async function useNuxtViteConfig() {
   }
   const runtimeDir = fileURLToPath(new URL('../runtime', import.meta.url))
   nuxt.options.build.templates.push(
-    { src: join(runtimeDir, 'composables.mjs'), filename: 'histoire/composables.mjs' },
+    {
+      async getContents() {
+        return `
+            export const useNuxtApp = () => ({
+              runWithContext: async (fn) => await fn(),
+              $config: ${JSON.stringify(nuxt.options.runtimeConfig)},
+            })
+        `
+      },
+      filename: "histoire/composables.mjs",
+    },
     { src: join(runtimeDir, 'components.mjs'), filename: 'histoire/components.mjs' },
   )

[juleshry]

Hey @gjeusel,
Thanks for your comment !
It's weird that it doesn't work on your side, maybe our config is not entirely the same.
I think your solution would work fine. But I would like to have some feedback from the team because I don't understand why they want to mock it either.

[0x100101]

#666 is another related discussion.

@juleshry I implemented your solution and it worked for me on Nuxt 3.10.3 with Histoire 0.17.15

@gjeusel I think you're right to point out that there must be a good reason it was stubbed. But just copying the config in to the stub doesn't solve the problem completely either. (See #666)

Until we completely understand the intention behind the stub it's hard to propose a fix.

[Akryum]

I wonder why the tests don't run on this PR 🤔

[awacode21]

anything new? i try to render https://nuxt.com/modules/icon in histoire but it is not working