Vue - Extract multiple components from index

Question

I created a Vue.js project that uses the .vue component specs format when writing components for my project (see example below). What i noticed, is that plain JavaScript can export these components loaded from vue files. For example, index.js can export an component defined in index.vue. What I'm trying to do now is export multiple components from the index.js. However, when i import the multiple components, they do not render. If i import the index.js as a single object, and then extract the components, it works correctly. Why/How can't i extract multiple components from index?

index.js

import A from './A.vue';
import B from './A.vue';

export default { A,  B };

home.vue

<script>
import Main from "../common/forms";
const { A, B } = Main; // Works 
// import { A, B } from "../common/forms"; // Not Working 


export default {
    name: 'app-home',
    components:{ A, B}
}
</script>
<template>
    <div id="app-home">
        <h1>App Home </h1>      
        <A /> 
        <B/>
    </div>
</template>

idmean · Accepted Answer · 2018-04-23 13:44:54Z

5

You misinterpret import { A, B } as object destructuring, but it is not.

This codet tries to import the values A and B that were exported as such. Like for instance:

export class A {}
export class B {}

But you are exporting your object as the default export.

If you want to export both components and not the object as whole, you can use

export { A,  B }

which allows you to use import { A, B }.

It is worth checking out the MDN documentation.

answered Apr 23, 2018 at 13:44

idmean

15k9 gold badges63 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue - Extract multiple components from index

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related