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?

• [x] Bug fix
• [ ] New Feature
• [ ] Documentation update
• [ ] Other

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

• [x] Read the Contributing Guidelines.
• [x] Read the Pull Request Guidelines and follow the Commit Convention.
• [x] Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• [x] 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[bot]]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview

[stackblitz[bot]]

Run & review this pull request in StackBlitz Codeflow.

[netlify[bot]]

✅ Deploy Preview for histoire-examples-svelte3 ready!

Name	Link
🔨 Latest commit	5162bd5c0abf2f4d1022e2cd290031a6fc57e2f8
🔍 Latest deploy log	https://app.netlify.com/sites/histoire-examples-svelte3/deploys/66193fbe5af146000879a906
😎 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[bot]]

✅ Deploy Preview for histoire-controls ready!

Name	Link
🔨 Latest commit	5162bd5c0abf2f4d1022e2cd290031a6fc57e2f8
🔍 Latest deploy log	https://app.netlify.com/sites/histoire-controls/deploys/66193fbe99a9ee0008a379c7
😎 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[bot]]

✅ Deploy Preview for histoire-examples-vue3 ready!

Name	Link
🔨 Latest commit	5162bd5c0abf2f4d1022e2cd290031a6fc57e2f8
🔍 Latest deploy log	https://app.netlify.com/sites/histoire-examples-vue3/deploys/66193fbe1c9ade00088dd927
😎 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[bot]]

✅ Deploy Preview for histoire-site ready!

Name	Link
🔨 Latest commit	5162bd5c0abf2f4d1022e2cd290031a6fc57e2f8
🔍 Latest deploy log	https://app.netlify.com/sites/histoire-site/deploys/66193fbeabc3590008093c7c
😎 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.