Hey there, I've been working with Vue.js and came across an interesting challenge. In order to use components in Vue.js, you usually need to import them individually. I thought of a solution where we could create a module containing paths to all the components like this:
export default {
bar: '@/components/chart/bar.vue',
dashboard: '@/components/chart/dashboard.vue',
gantt: '@/components/chart/gantt.vue',
// ... other path
}
We can then use this module in our .vue files like this:
<template>
<!-- ... some code -->
</template>
<script>
import path from '@/theGoodPath'
import bar from path.bar
// ... some code
</script>
However, it seems that this approach is not working as expected. It would have been convenient to manage component paths centrally in one file for easier maintenance.
What are your thoughts on this?
EDIT : I also tried using re-exporting, but encountered issues when changing my imports from:
<script>
import bar from '@/components/chart/bar'
import gantt from '@/components/chart/gantt'
import dashboard from '@/components/chart/dashboard'
import menuNav from '@/components/mini components/menuNav'
// some code
</script>
to:
<script>
import { bar, gantt, dashboard, menuNav } from '@/path.js'
// some code
</script>
This did not work in the second case. My path.js file looks like this:
export { default as bar } from '@/components/chart/bar'
export { default as dashboard } from '@/components/chart/dashboard'
export { default as gantt } from '@/components/chart/gantt'
export { default as menuNav } from '@/components/mini components/menuNav'