How to export multiple components

Question

I have a shared folder that I expose as an npm module. inside that share folder I have a components folder with index.js that exports them as default:

export { default as AqMegaMenu } from "./megaMenu/AqMegaMenu.vue";
export { default as AqDetailsCard } from "./AqDetailsCard.vue";
export { default as AqDoughnutChart } from "./charts/AqDoughnutChart.vue";
...

My entry file for the library is main.js and i'd like to expose my entire components through it, so I import them in other projects like this:

import {Comp1, Comp2} from "@my/shared"

Currently I export them one by one in main.js:

export { default as AqDetailsCard } from "./components/AqDetailsCard.vue";
...

But i was wondering if there is a way to export the entire components directory using it's index.js and still be able to import it in other projects like i showed above.

Answer 1

You may try something like this

import camelCase from 'lodash/camelCase'
const requireModule = require.context('./components', true, /\.vue$/)
const modules = {}

requireModule.keys().forEach(filename => 
{
    const moduleName = camelCase(fileName.match(/([^\\\/]+)\.vue$/)[1]);
    modules[moduleName] = requireModule(fileName)
})
export default modules