feat: set customElements at runtime

[huang-julien]

resolves #36

[abdonrd]

Thanks!

Could we allow the same as Vue? Receive a function: https://vuejs.org/api/application.html#app-config-compileroptions-iscustomelement

In addition to MathML Elements, we also usually use Web Components (like @carbon/web-components). Example:

const mathmlTags = [/* ... */];
const isMathmlTag = (tag: string) => mathmlTags.includes(tag)

export default defineNuxtConfig({
  // ...
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => isMathmlTag(tag) || tag.startsWith('bx-'),
    },
  },
});

[huang-julien]

I'm currently investigating to see if we can directly retrieve the vue compiler options and pass it into the plugin template

[huang-julien]

Currently it is not possible to import the app.config.ts file within the module at build time since the file won't go through any transformation and is being imported as it is. If the user use the defineAppConfig, it won't be possible to import it and merge the compiler options with the build compilerOptions in the nuxt config since this is supposed to be auto-imported. If the user import defineAppConfig from nuxt/app the dynamic import will go through a max callstack since there seems to be some circular dependencies. @abdonrd I think this is the only way to have the closest implementation of the RuntimeCompilerOptions. We canno't (yet) pass non stringifyable options such as functions to plugins which are available a runtime. If you use customElement in your .vue components, they still need the compiler options from nuxt.config.ts since this is what will be passed to the @vitejs/plugin-vue at build time.

[abdonrd]

Oh, we didn't know about the app.config.ts.

We only use the nuxt.config.ts:

const mathmlTags = [/* ... */];
const isMathmlTag = (tag: string) => mathmlTags.includes(tag)

export default defineNuxtConfig({
  // ...
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => isMathmlTag(tag) || tag.startsWith('bx-'),
    },
  },
});

[huang-julien]

I think the current state of this PR should be acceptable since:

• there's no way to pass non stringifyable options from modules to plugins
• There's currently no way to get the nuxt config in runtime
• We can't import the appConfig and use it to set the options also in build time. (i might open an issue in nuxt for this)

[abdonrd]

Got it!

And these problems would be solved if https://github.com/nuxt/framework/pull/4762 PR is accepted, right?

[huang-julien]

Got it!

And these problems would be solved if nuxt/framework#4762 PR is accepted, right?

i'm having the same issues with the PR. I keep it as a draft for now (i still need to redo the merge 😂 ).

[huang-julien]

I found a way (not very clean tho) to import the app config within the module and to set the RuntimeCompilerOptions into the builder context :+1: This workaround should'nt be applied to the PR