Issues with the Vue runtime compiler support

[abdonrd]

Environment

• Operating System: Darwin
• Node Version: v18.12.1
• Nuxt Version: 3.4.0
• Nitro Version: 2.3.3
• Package Manager: npm@8.19.3
• Builder: vite
• User Config: app, runtimeConfig, css, modules, components, vite, vue, experimental
• Runtime Modules: @nuxtjs/color-mode@3.2.0, @pinia/nuxt@0.4.8
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-ruqb96?file=nuxt.config.ts

Describe the bug

Enabling the Vue runtime compiler support in the nuxt.config.ts:

  experimental: {
    runtimeVueCompiler: true,
    externalVue: false,
  },

Also adding vue.compilerOptions.isCustomElement config in the nuxt.config.ts:

  vue: {
    compilerOptions: {
      isCustomElement: (tag) =>
        isMathmlTag(tag) || tag.startsWith('bx-') || tag === 'custom-element',
    },
  },

We have issues with the Vue runtime compiler support:

• Failed to resolve component: custom-element
• Failed to resolve component: math
• Non-function value encountered for default slot. Prefer function slots for better performance
• Component is missing template or render function.

Additional context

No response

Logs

[Vue warn]: Failed to resolve component: custom-element                                                                               6:28:56 AM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: math                                                                                         6:28:56 AM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: semantics                                                                                    6:28:56 AM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: mrow                                                                                         6:28:56 AM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: mi                                                                                           6:28:56 AM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: annotation                                                                                   6:28:56 AM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.                            6:28:56 AM
[Vue warn]: Component <Anonymous> is missing template or render function.                                                             6:28:56 AM
[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.                            6:28:56 AM
[Vue warn]: Component <Anonymous> is missing template or render function.                                                             6:28:56 AM

[abdonrd]

Friendly ping to the people who have worked in nuxt/framework#4762: @huang-julien @danielroe

[danielroe]

In that case, you need to set that function at runtime:

https://stackblitz.com/edit/github-ruqb96-hzuf7b

[abdonrd]

Thanks for the quick reply, @danielroe! It works! 👏

[abdonrd]

One more thing! 😅

We should duplicate the config in the nuxt.config.ts when we have custom elements outside the runtime compiler?
If not, we have the same warnings.

Example: https://stackblitz.com/edit/github-ruqb96-fwkos3

Thanks!

[huang-julien]

yes because the config used in nuxt.config.ts is sent to the compiler only at build time through vite/plugin-vue. And you can't import the nuxt config in runtime