fix: Nuxt App created only when story vue app rendered first time,

[chakAs3]

🔗 Linked issue

📚 Description

The issue arose because, in the setup function, the code was checking if the Nuxt context with storyContext.id was already used by the Nuxt app. This prevented the recreation of the Nuxt app, which led to a bug where revisiting the same story caused its Vue app to lack a Nuxt instance.

The bug specifically occurred when using modules that register plugins with the Vue app, such as i18n. On the first render, the story was correctly displayed with the registered plugin (e.g., translations). However, on subsequent renders, the Vue app couldn't find the registered plugin.

Solution:
Use canvasElement.id as a unique key for differentiation.
Create a new Nuxt app each time a story’s Vue app is rendered.
Remove the check for context.tryUse() since a new Vue app is always created and mounted for each story.
This ensures that every story render gets a fresh and fully initialized Nuxt app.

Changes:
I added i18n example to playground and example/showcase
I configured Vite bundler to alias "vue" to "vue/dist/vue.esm-bundler.js, to solve the runtime compilation issue for custom string template

[netlify]

✅ Deploy Preview for nuxt-storybook ready!

Name	Link
🔨 Latest commit	bc665ef
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt-storybook/deploys/676ef13409e7bc000896ce02
😎 Deploy Preview	https://deploy-preview-830--nuxt-storybook.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.

[tobiasdiez]

This has the same problem as the other PRs adding the vue alias: the playground build is failing...no idea why :(

[chakAs3]

This has the same problem as the other PRs adding the vue alias: the playground build is failing...no idea why :(

Oh i see i was about to ask why only Playground start failing in this case ? examples are passing, also something wrong in Playground the NuxtWelcome component in the Welcome story loaded without scoped css, it looks off

[chakAs3]

Hi @tobiasdiez,what can we do to get this PR merged? could you review it when you have some time? Let me know if you need any clarifications.I tried to recreate the Playground, but it's still failing. Do you think bypassing it could cause any issues?

[tobiasdiez]

I have no idea why the playground is failing, and only the playground. I was afraid that if we add the vue alias then users will experience similar issues. I didn't had time yet to debug why it occurs.

You said you re-generated the playground. Do you mean you tried to update the code to be aligned with the starter / storybook init? That was my plan to approach the problem: recreate the starter, playground and the other examples with the version from storybookjs/storybook#28607 (which we should do anyway). And then see try again with adding the vue compiler alias...

[chakAs3]

You said you re-generated the playground. Do you mean you tried to update the code to be aligned with the starter

I tried that but i got an error while using the npx storybook init in fresh Nuxt project, have you tried from your side?
I recreated from same starter project in examples
something weird i had to build every time the module to see the changes on the Playground not smooth DX, and examples serve to test the changes on module as well and they working fine

[chakAs3]

Hi @tobiasdiez. i have debugged further the build command.
It seems there’s an issue where a plugin (likely in Vite or Nuxt) is repeatedly replacing the string "vue" with "vue/dist/vue.esm-bundler.js". This replacement keeps being applied recursively, creating paths like:

vue/dist/vue.esm-bundler.js/dist/vue.esm-bundler.js/dist/vue.esm-bundler.js ...
As a result:

The file ID keeps changing with each importer step.
The updated ID doesn’t resolve because it’s not present in nuxt.vfs.
This triggers another resolution attempt, causing a loop.
This pattern repeats indefinitely until it causes a memory issue and throws an exception.

I suspect this is caused by faulty string replacement logic in one of the plugins or configurations. Let me know if this can help debug further or give you an idea who can help us.

[tobiasdiez]

Thanks for looking into this. So it comes down now to figuring out why vue is constantly replaced?

[chakAs3]

Thanks for looking into this. So it comes down now to figuring out why vue is constantly replaced?

Yes, I think so. We should start by investigating how the replacement of 'vue' with the alias 'vue/dist/vue.esm-bundler.js' is being handled and identify where the logic goes wrong. This seems to be the root cause of the recursive replacements