Level 39
in .js file you can import as many Vue3 components as you need.
Jan 4, 2021
6
Level 1
Can you export more than one components in vue
I have been playing around with Vue 3 composition API, and I was wondering if in a .JS file you can export multiple components
Level 1
I mean export components, for example I wrote Different components in a single .JS file but I want to import them in a parent component, I have tried to export them like you would in a JavaScript function it won't work, unless I just pick one of the components to export default
Level 80
@kachi_dk I don’t see why not, but it’s always better to have a single component in a single file. You don’t put multiple PHP classes in the same file and they’re then easier to find. Your future self and your teammates will thank you if you stick to this practice.
Level 1
Noted :-)
Level 1
But I just want to see an example if it's possible
Level 1
@kachi_dk Maybe it's too late, but i hope this can help.
I usally make my components with extension .vue, and each component has its own file. Then, I create a .js file, wich I import the components I want and then export all of them.
So, you can do this:
file: index.js => path: /src/components/ExportAllMyComps/index.js
import MyComponentA from "../Elements/MyComponentA.vue"
import MyComponentB from "../../components/Elements/MyComponentB.vue"
import MyComponentC from "/src/components/Elements/MyComponentC.vue"
//You can import using relative or absolute path, you choose.
export { MyComponentA, MyComponentB, MyComponentC }
//export by destructuring
Finally, you import all them in you parent component:
file: MyParentComponent => path: /src/components/Layout/MyParentComponent.vue
<script>
import * as UcanChooseTheName from '/src/components/ExportAllMyComps'
</script>
To render these components you need to return them to use on template. all of them will be accessible by variable A with object notation:
file: MyParentComponent => path: /src/components/Layout/MyParentComponent.vue
<template>
<component :is="UcanChooseTheName.MyComponentA" />
// render MyComponentA
<component :is="UcanChooseTheName.MyComponentB" />
// render MyComponentB
</template>
Please or to participate in this conversation.