vue-loader extra options

[roberfi]

I would like to add compilerOptions.isCustomElement vue option and, to do so, I have added the following configuration to the extension.config.js file:

module.exports = {
  config: (config) => {
    config.module.rules.push({
      test: /\.vue$/,
      loader: require.resolve("vue-loader"),
      options: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith("ion-"),
        },
      },
    });

    return config;
  },
};

However, it looks like extension.js it is already adding its own rule for vue files after this one, which is causing the following error:

× ModuleError: At least one <template> or <script> is required in a single file component.

Is there any other way to do what I need?

[roberfi]

Just in case this can be helpful for anyone else, I've finally found a way to add an option to the already existing vue rule using this configuration in extension.config.js file:

class VueLoaderConfiguratorPlugin {
  static name = "VueLoaderConfiguratorPlugin";

  apply(compiler) {
    compiler.hooks.compile.tap(VueLoaderConfiguratorPlugin.name, () => {
      const config = compiler.options;
      const vueRule = config.module.rules.find(
        (rule) => rule.test && rule.test.toString().includes(".vue")
      );

      if (vueRule) {
        // Add the loader to the Vue rule
        vueRule.use[0].options = {
          ...vueRule.use[0].options,
          compilerOptions: {
            isCustomElement: (tag) => tag.startsWith("ion-"),
          },
        };
      } else {
        console.log(
          "Vue rule not found. Please check your Webpack configuration."
        );
      }
    });
  }
}

const { DefinePlugin } = require("@rspack/core");

module.exports = {
  config: (config) => {
    config.plugins = [
      ...config.plugins,
      new VueLoaderConfiguratorPlugin(),
    ];
    return config;
  },
};

It would be really helpful to have native support for specifying extra compiler options directly via the extension.config.js file, rather than needing to implement a custom Webpack plugin.