huang-julien/nuxt-runtime-compiler

vueCompilerOptions is not working

Closed this issue · 9 comments

huang-julien commented 
          Thanks @huang-julien! The [nuxt-runtime-compiler](https://www.npmjs.com/package/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: vuejs/core#3746 (comment)

(Because we are using Katex)

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

Originally posted by @abdonrd in nuxt/framework#4762 (comment)

huang-julien commented

Hi @abdonrd👋 ,
This option should be working (at least for me). Do you have a small reproduction or can show me the content of your nuxt.config.ts ?

abdonrd commented

BTW, I need to downgrade Nuxt to v3.0.0, if not, I can't add nuxt-runtime-compiler.

huang-julien commented

I could reproduce the issue thank you !
I just debugged this and it seems that the compiler options are lost in the component instance server side 🤔

The only workaround for now is to add the compiler option in your component definition:

`const root = defineComponent({
  template: katex.renderToString(props.content),
  compilerOptions: {
    isCustomElement: (tag: string) => [
      'math',
      'maction',
      'maligngroup',
      'malignmark',
      'menclose',
      'merror',
      'mfenced',
      'mfrac',
      'mi',
      'mlongdiv',
      'mmultiscripts',
      'mn',
      'mo',
      'mover',
      'mpadded',
      'mphantom',
      'mroot',
      'mrow',
      'ms',
      'mscarries',
      'mscarry',
      'mscarries',
      'msgroup',
      'mstack',
      'mlongdiv',
      'msline',
      'mstack',
      'mspace',
      'msqrt',
      'msrow',
      'mstack',
      'mstack',
      'mstyle',
      'msub',
      'msup',
      'msubsup',
      'mtable',
      'mtd',
      'mtext',
      'mtr',
      'munder',
      'munderover',
      'semantics',
      'math',
      'mi',
      'mn',
      'mo',
      'ms',
      'mspace',
      'mtext',
      'menclose',
      'merror',
      'mfenced',
      'mfrac',
      'mpadded',
      'mphantom',
      'mroot',
      'mrow',
      'msqrt',
      'mstyle',
      'mmultiscripts',
      'mover',
      'mprescripts',
      'msub',
      'msubsup',
      'msup',
      'munder',
      'munderover',
      'none',
      'maligngroup',
      'malignmark',
      'mtable',
      'mtd',
      'mtr',
      'mlongdiv',
      'mscarries',
      'mscarry',
      'msgroup',
      'msline',
      'msrow',
      'mstack',
      'maction',
      'semantics',
      'annotation',
      'annotation-xml'
    ].includes(tag)
  }
})
huang-julien commented

I'll check tomorrow how this can be fixed

  • ❤️1
huang-julien commented

Within the docs, it seems that the vue compiler options are passed only at build time 🤔 .
Edit: Just found a way to make it work at runtime. Will update the package in the current week

abdonrd commented

Sounds good, thanks @huang-julien!

abdonrd commented

Thanks for the new release, @huang-julien! 👏🏻

By the way, why using the app.config.ts instead of using the nuxt.config.ts to setup the vue.compilerOptions.isCustomElement options?

Wouldn't it be possible to setup the vue.compilerOptions.isCustomElement options just in the nuxt.config.ts?

huang-julien commented

That's because we can't export the config to the runtime :/ so this was the only way to have a common option between build time and runtime.
I'm currently trying to see how i can import ts files within the module (already have an idea) without importing it in the nuxt.config

  • 👍1