vue3 component batch registration

name inside the component

<template>
  <div>M1</div>
</template>

<script>
export default {
  name: "M1",
};
</script>

<style></style>

In component / index.js

const requireAll = require.context("@/components", true, /\.vue$/);
const install = (app: any) => {
  requireAll
    .keys()
    .map((filename) => requireAll(filename))
    .forEach(({ default: Component }) =>
      app.component(Component.name, Component)
    );
};
export default {
  install,
};

main.js

import { createApp } from "vue";
import App from "./App.vue";
import My from "./components";
createApp(App).use(My).mount("#app");