feat(nuxt): support using vue runtimeCompiler on build

[huang-julien]

🔗 Linked issue

resolve #4661

❓ 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)
• [x] ✨ 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

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

[netlify[bot]]

✅ Deploy Preview for nuxt3-docs ready!

Name	Link
🔨 Latest commit	b404f6eefb7a95297563aa5be093dbcb89c6c26e
🔍 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 :wave: , 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 - https://github.com/unjs/nitro/pull/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 https://github.com/nuxt/nuxt.js/issues/13843

[huang-julien]

fixed https://github.com/nuxt/nuxt.js/issues/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]

@pi0 I think test fixtures for the runtime compiler should be made with externalVue true and false since there was different issues depending on this option.

[abdonrd]

Are there plans to merge this PR? Thanks!

[huang-julien]

oh i completly forgot about this PR :sweat_smile: i'll add some tests (external vue true -- false) maybe this weekend if have some times, i also need to check if this is still working with nuxt 3.1 being released. meanwhile you can use nuxt-runtime-compiler which is basically the content of this PR but within a nuxt module

[abdonrd]

Thanks @huang-julien! The nuxt-runtime-compiler works well for us!

One thing... We are using the vue.compilerOptions.isCustomElement option in the nuxt.config.ts as mentioned here: https://github.com/vuejs/core/issues/3746#issuecomment-835766808

(Because we are using Katex)

Could it be that this configuration does not reach the runtime compiler?

[huang-julien]

@danielroe about the options for vue in runtime, how should we do it ? This can be done through a plugin by the user but i think it might be better to be able to use the compatible options used at build time.

[toniengelhardt]

Having some trouble getting the module to work, but would be amazing if we could do something like this:

<script setup lang="ts">
import { compile, h } from 'vue'

const id = 5
const dc = '<div class="some-class"><MyComponent :id="${id}" /></div>'

const RenderContent = () => h(compile(dc))
</script>

<template>
  <div>
    <div>My dynamically generated content:</div>
    <RenderContent />
  </div>
</template>

like in these examples:

• https://stackoverflow.com/a/70151867/1384972
• https://stackoverflow.com/questions/68981411/vue3-how-to-use-vue-compile-in-vue3

[abdonrd]

@huang-julien you have an small lint error: https://github.com/nuxt/framework/actions/runs/4129036194/jobs/7134196036#step:6:14

[abdonrd]

@danielroe Is there still interest in merging this? Thank you!

[huang-julien]

i plan to update this this weekend

[abdonrd]

@huang-julien it seems now the tests do not pass well.

[huang-julien]

yes estree walker is not being traced by NFT. Locally, a simlink of estree walker is being send to .output. Going to check if this is does impact nuxt-runtime-compiler as well

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