vueCompilerOptions is not working

[huang-julien]

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

Originally posted by @abdonrd in https://github.com/nuxt/framework/issues/4762#issuecomment-1406632473

[huang-julien]

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]

Hi!

Here you have an small repo: https://github.com/abdonrd/nuxt-runtime-compiler-demo

[abdonrd]

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

[huang-julien]

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]

I'll check tomorrow how this can be fixed

[huang-julien]

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]

Sounds good, thanks @huang-julien!

[abdonrd]

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]

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