feat(nuxt): support vue runtime compiler - #4762

✅ 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.

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 @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 ?

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

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

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

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

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

investigating nuxt/nuxt#13843

fixed nuxt/nuxt#13843

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?

@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

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

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

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

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! 😃