Skip to content
New issue

Have a question about this project?Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of serviceand privacy statement.We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: allow to specify app id when creating a nuxt app #28392

Merged
merged 4 commits into from
Aug 6, 2024

Conversation

tobiasdiez
Copy link
Contributor

🔗 Linked issue

📚 Description

When creating a new nuxt application viacreateNuxtApp,it is now possible to overwrite the app id specified in the nuxt config.

This is needed for the storybook module where we create multiple instances of the same nuxt app (in the same website) and would like to give them different ids to preserve their context. Seenuxt-modules/storybook#723 (comment)for more context that triggered this PR.

Copy link

stackblitz bot commented Aug 2, 2024

Review PR in StackBlitz CodeflowRun & review this pull request inStackBlitz Codeflow.

/**
* The name of the Nuxt application, overrides the default name specified in the Nuxt config (default: `nuxt-app`).
*/
appId?: NuxtApp['_name']
Copy link
Member

@danielroe danielroe Aug 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Would it make sense for this to benameinstead ofappId?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

I was unsure about this as well. In the nuxt config it is appId, but name would be a natural choice as well. Do you have a preference?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Let's useid- and update_nameto be_id...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

I agree, this makes sense!
However, there was already an_idfield in theNuxtApp,which was used to generate app-wide unique ids inuseId.I've renamed that field to_genId.

@danielroe danielroe merged commitefae7e2 into nuxt:main Aug 6, 2024
38 checks passed
@github-actions github-actions bot mentioned this pull request Aug 6, 2024
@tobiasdiez tobiasdiez deleted the app-id-create branch August 6, 2024 17:19
@github-actions github-actions bot mentioned this pull request Aug 8, 2024
5 tasks
@tobiasdiez
Copy link
Contributor Author

@danielroe@huang-julienI've tried to use this PR in the storybook module but encountered the following error:

Error: [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at `https://nuxt /docs/guide/concepts/auto-imports#vue-and-nuxt-composables`.
at definePayloadReviver (/@fs/D:/Programming/nuxt-storybook/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]_3xmfrk4x4fipugkjlwslnycjnu/node_modules/nuxt/dist/app/composables/payload.js?v=728a24b5:125:5)
at setup (/@fs/D:/Programming/nuxt-storybook/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]_3xmfrk4x4fipugkjlwslnycjnu/node_modules/nuxt/dist/app/plugins/revive-payload.client.js?v=728a24b5:40:27)
at /@id/virtual:nuxt:D:/Programming/nuxt-storybook/examples/showcase/.nuxt/plugins/client.mjs:33:69
at executeAsync (/@fs/D:/Programming/nuxt-storybook/node_modules/.pnpm/[email protected]/node_modules/unctx/dist/index.mjs?v=728a24b5:111:19)
at setup (/@id/virtual:nuxt:D:/Programming/nuxt-storybook/examples/showcase/.nuxt/plugins/client.mjs:33:43)
at /@fs/D:/Programming/nuxt-storybook/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]_3xmfrk4x4fipugkjlwslnycjnu/node_modules/nuxt/dist/app/nuxt.js?v=728a24b5:140:66
at fn (/@fs/D:/Programming/nuxt-storybook/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]_3xmfrk4x4fipugkjlwslnycjnu/node_modules/nuxt/dist/app/nuxt.js?v=728a24b5:217:44)
at runWithContext (/@fs/D:/Programming/nuxt-storybook/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=728a24b5:2682:18)
at callWithNuxt (/@fs/D:/Programming/nuxt-storybook/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]_3xmfrk4x4fipugkjlwslnycjnu/node_modules/nuxt/dist/app/nuxt.js?v=728a24b5:223:24)
at createNuxtApp/runWithContext (/@fs/D:/Programming/nuxt-storybook/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]_3xmfrk4x4fipugkjlwslnycjnu/node_modules/nuxt/dist/app/nuxt.js?v=728a24b5:37:53)
at run (/@fs/D:/Programming/nuxt-storybook/node_modules/.pnpm/@[email protected]/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=728a24b5:32:16)
at runWithContext (/@fs/D:/Programming/nuxt-storybook/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]_3xmfrk4x4fipugkjlwslnycjnu/node_modules/nuxt/dist/app/nuxt.js?v=728a24b5:37:31)
at applyPlugin (/@fs/D:/Programming/nuxt-storybook/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]_3xmfrk4x4fipugkjlwslnycjnu/node_modules/nuxt/dist/app/nuxt.js?v=728a24b5:140:39)
at executePlugin (/@fs/D:/Programming/nuxt-storybook/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]_3xmfrk4x4fipugkjlwslnycjnu/node_modules/nuxt/dist/app/nuxt.js?v=728a24b5:159:34)
at applyPlugins (/@fs/D:/Programming/nuxt-storybook/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]_3xmfrk4x4fipugkjlwslnycjnu/node_modules/nuxt/dist/app/nuxt.js?v=728a24b5:190:11)
at /@fs/D:/Programming/nuxt-storybook/packages/storybook-addon/dist/preview.mjs:40:9

when callingapplyPlugins(seenuxt-modules/storybook#762)

The reason is that I do set the context viagetContext( "nuxt-app-customid" ).set(nuxt, true)but laterdefinePayloadRevivercallsuseNuxtApp()without anyappId,which thus falls back to the idnuxt-app;which is not set. As a workaround I now usegetContext('nuxt-app').set(nuxt, true).This works but feels a bit like a hack (and I'm not sure if it covers all edge cases).

How isuseNuxtApp()(without a nuxt-app id as argument) supposed to work in a multi-app context? Moreover, shouldcallWithNuxtalso set the defaultnuxt-appcontext to the passed nuxt instance?

(I can open a new issue for these questions, but thought this PR has the required context.)

chakAs3 pushed a commit to nuxt-modules/storybook that referenced this pull request Aug 24, 2024
<!--
☝️ PR title should follow conventional commits
(https://conventionalcommits.org).
In particular, the title should start with one of the following types:

- docs: 📖 Documentation (updates to the documentation or readme)
- fix: 🐞 Bug fix (a non-breaking change that fixes an issue)
- feat: ✨ New feature/enhancement (a non-breaking change that adds
functionality or improves existing one)
- feat!/fix!:⚠️Breaking change (fix or feature that would cause
existing functionality to change)
- chore: 🧹 Chore (updates to the build process or auxiliary tools and
libraries)
-->

### 🔗 Linked issue

This finallyfixes#661.
<!-- If it resolves an open issue, please link the issue here. For
example "Resolves#123"-->

### 📚 Description

Withnuxt/nuxt#28392it is now possible to key
the context to the correct nuxt instance.

Breaking change since we need the newest nuxt version for this to work.

<!-- Describe your changes in detail -->
<!-- Why is this change required? What problem does it solve? -->
@danielroe
Copy link
Member

@tobiasdiezYes, multi-app support hasn't yet landed. The next step would be a compile time injection of the nuxt app-id in calls touseNuxtApp.For now, it's definitely safer to usenuxt-appas the app id, and I think your workaround is fine.

If you are able to add some tests we can add it tohttps://github /nuxt/ecosystem-ci/so we ensure any future changes along these lines don't break the storybook integration. 🙏

@tobiasdiez
Copy link
Contributor Author

@tobiasdiezYes, multi-app support hasn't yet landed. The next step would be a compile time injection of the nuxt app-id in calls touseNuxtApp.For now, it's definitely safer to usenuxt-appas the app id, and I think your workaround is fine.

Thanks for the feedback! I really like the multi-app feature and the possibilities it opens. Big thanks to everyone that worked on it so far!

If you are able to add some tests we can add it tohttps://github /nuxt/ecosystem-ci/so we ensure any future changes along these lines don't break the storybook integration. 🙏

Sure!nuxt/ecosystem-ci#14

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants