feat(nuxt): support vue runtime compiler

[huang-julien]

🔗 Linked issue

resolve nuxt/nuxt#13843

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR allow to use vue runtimeCompiler on both server and client side

• add vue.runtimeCompiler boolean option to nuxt/schema
• unmock vue 3 only when runtimeCompiler option is set to true when building and make vue runtime compiler available client side
• with externalVue to true, force trace files used by generated code from the runtime compiler

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[netlify]

✅ Deploy Preview for nuxt3-docs ready!

Name	Link
🔨 Latest commit	b404f6e
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/632b6790a288710009537d25
😎 Deploy Preview	https://deploy-preview-4762--nuxt3-docs.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 settings.

[pi0]

Hi @huang-julien and thanks for this PR! 💚 I think finally we can add an option to nitro if modification of commonJS plugin options is required.

I hope we can add runtime support with lighter dependencies. At least having @vue/devtools-api doesn't makes sense to me in the bundle for it.

(BTW: You don't need to merge into main on each commit. I will make once rebase before merge)

[huang-julien]

Hi @huang-julien and thanks for this PR! 💚 I think finally we can add an option to nitro if modification of commonJS plugin options is required.

I hope we can add runtime support with lighter dependencies. At least having @vue/devtools-api doesn't makes sense to me in the bundle for it.

(BTW: You don't need to merge into main on each commit. I will make once rebase before merge)

Hi @pi0 👋 , yes i was thinking about a PR on Nitro to add the option for the commonjs plugin modification instead of just replacing it in the nuxt package. Do you want me to remove the @vue/devtool-api from the bundle through a commit ?

[huang-julien]

linked PR - unjs/nitro#187
the feature will be refactored if the PR is accepted

[huang-julien]

@pi0 it should be ok now. here's a working example

[huang-julien]

Client builds with runtime compiler now supports webpack and the runtimeCompiler option is now under the vue namespace in packages/schema/src/config/_app.ts

[tobiasdiez]

What's the status of this PR? Would be awesome to use the runtime compiler soon!

[huang-julien]

@tobiasdiez if you really need it now, this module can enable it

[huang-julien]

investigating nuxt/nuxt#13843

[huang-julien]

fixed nuxt/nuxt#13843

[Atinux]

Thank you!

It would be nice to document this option somewhere since it is quite useful for CMS integrations using the template prop (see linked issue).

Also, is there a place where we can add a test case for this?

[huang-julien]

@Atinux

Also, is there a place where we can add a test case for this?

Do you mean a stackblitz or an example ? I've tested the component with template defined in runtime in the playground here

[Atinux]

I am thinking of a test case here: https://github.com/nuxt/framework/tree/main/test

Any guidance for the best place for it? @danielroe @pi0

[pi0]

Testing requires making another fixture currently we only have one. We can add later.

I'm pending to locally test this PR. Some changes can be probably reduced for mocking and saving bundle size with option enabled.

In the meantime you can use nuxt-runtime-compiler module

[huang-julien]

can't find why CI are failing 🤷‍♂️ I can't see logs while it does work locally. I'm not even sure if the issue comes from estree walker

[autofix-troubleshooter]

Hi! I'm the autofix.ci troubleshooter bot.

It looks like you correctly set up a CI job that uses the autofix.ci GitHub Action, but the autofix.ci GitHub App has not been installed for this repository. This means that autofix.ci unfortunately does not have the permissions to fix this pull request. If you are the repository owner, please install the app and then restart the CI workflow! 😃

[danielroe]

This looks good to me - I've tested on an external project as well, and all seems good. Very happy to iterate over v3.4 releases and then make stable in vue.runtimeCompiler in v3.5.

Thank you so much for your lengthy and good work on this ❤️