add support for configuring @vitejs/plugin-vue-jsx's isCustomElement option

[WickyNilliams]

Describe the feature

there is currently no way to configure @vitejs/plugin-vue-jsx via nuxt's config. see this line from @nuxt/vite-builder https://github.com/nuxt/nuxt/blob/523b495e1d808c3a1e57e190d73f460ddf3b3d8b/packages/vite/src/client.ts#LL63C23-L63C23

my use case is that i need to pass an isCustomElement function to the vue jsx plugin. the jsx plugin needs its own isCustomElement function (as well as the usual one you'd pass to the more common vue plugin). without this, i get "Failed to resolve component" warnings logged in the console.

there are two possible approaches to solving this that i see

1. internally pass the same isCustomElement function to both vue and jsx plugins. i can't imagine why you'd ever need them to differ, and this means things would "just work" if you configure it once. however i understand this is a little magical, and may not be paletable to you
2. a simpler option is to add a new config section specifically for the jsx plugin. this could be top-level alongside vue like vueJsx, or a child key of vue like vue.jsx, or whatever makes sense

i am more than happy to work on a PR immediately for this following agreement from maintainers.

thanks!

Additional information

• [X] Would you be willing to help implement this feature?
• [X] Could this feature be implemented as a module?

Final checks

• [X] Read the contribution guide.
• [X] Check existing discussions and issues.

[WickyNilliams]

here's a reproduction of the issue of not being able to configure the jsx plugin https://stackblitz.com/edit/github-w5g6pa?file=app.vue,nuxt.config.ts

[danielroe]

I think it makes sense to have a separate vite.vueJsx config key (as I'm not sure these options will be portable to webpack and it would be nice to allow users to fully configure this plugin. We can default the isCustomElement value (and any other appropriate options) to the same as in top-level vue.

[WickyNilliams]

cool, good idea to merge the two approaches. i'll make a PR if that's ok with you?

[danielroe]

fantastic - thank you ❤️

[WickyNilliams]

just to be clear, you want it to look like this?

export default defineNuxtConfig({
  vite: {
    vueJsx: {
      isCustomElement: (tag) => tag.includes("-"),
      // etc
    },
  },
});

i only ask because the vue key is top-level and seem to get fed into @vitejs/plugin-vue, so i'm wondering if it should mirror that? also whether there should be a compilerOptions sub-key in the interest of consistency?

export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => tag.includes("-"),
      // etc
    },
  },
  vueJsx: {
    compilerOptions: {
      isCustomElement: (tag) => tag.includes("-"),
      // etc
    }
  },
});

[danielroe]

The reason I suggest to nest it under vite is the options don't match standard vue options, as far as I can tell. So they wouldn't be likely to be shared with any webpack plugin options.

More specifically, they look like this:

export interface VueJSXPluginOptions {
    /** transform `on: { click: xx }` to `onClick: xxx` */
    transformOn?: boolean;
    /** enable optimization or not. */
    optimize?: boolean;
    /** merge static and dynamic class / style attributes / onXXX handlers */
    mergeProps?: boolean;
    /** configuring custom elements */
    isCustomElement?: (tag: string) => boolean;
    /** enable object slots syntax */
    enableObjectSlots?: boolean;
    /** Replace the function used when compiling JSX expressions */
    pragma?: string;
}

[WickyNilliams]

that makes a lot of sense, i didn't realise the disparity between webpack and vite here (i'm not sure how webpack fits into nuxt as i'm new to the ecosystem). happy to follow your advice! i'll work on a PR today