How to import multiple vue files as one

Question

In other to avoid multiple imports into my vuejs app I created an index.js file and imported all the files in it like so:

import AddMember from "./AddMember.vue";
import EditMember from "./EditMember.vue";

export {
  AddMember,
  EditMember,
};

Then in my component compenent I imported them like so:

import * as Members from "../members/index.js";
export default {
  name: "members-table",
components: {
    AddMember: Members.AddMember
    EditMember: Members.EditMember,
  },
}

The EditMember Component is a dialog that opens up per the member clicked. But Anytime I click on a member on a the table I get and error that looks like this: even though the name prop was defined in all the components.

 Unknown custom element: <edit-member> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I resolved the problem my importing the EditMember.vue file itselfimport EditMember from './EditMember';. My question however, is there a way I can achieve this. Or better still what I'm I missing or did wrong.

I see the error says edit-member, are you using EditMember in your template or edit-member? — Daniel
– Daniel, Commented May 27, 2020 at 19:12
The problem might be somewhere else. I've tried various configurations, but seems like it should work. codesandbox.io/s/quizzical-mcclintock-6e4ev — Daniel
– Daniel, Commented May 27, 2020 at 19:21

Eli Sigal · Accepted Answer · 2020-05-27 19:40:33Z

1

well if it`s reusable components your trying to do so wouldnt it be better to create base components? and then you dont need to import them each time? import { AddMember, EditMember } from "../members/index.js"; this should work like @Asimple said

answered May 27, 2020 at 19:40

Eli Sigal

1002 silver badges10 bronze badges

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

1 Comment

Eli Sigal Over a year ago

could also try import a component like this components: { AddMember, EditMember },

Asimple · Accepted Answer · 2020-05-27 19:51:44Z

0

Maybe you can try to import them separately? Like this:

import { AddMember, EditMember } from "../members";

Update:

Changed import source, please, try it. Working example here

edited May 27, 2020 at 19:51

answered May 27, 2020 at 19:12

Asimple

6503 silver badges8 bronze badges

5 Comments

Asimple Over a year ago

You sure? Export should be without default

Dickson Afful Over a year ago

Yes it had no default

Dickson Afful Over a year ago

It worked for all other components I imported except the EditMember.vue. The Idea behind the app is that when a user clicks on the edit button on a particular user a dialog opens containing the EditMember Component. I think the problem has to do with the fact multiple edit buttons affect the component (maybe).

Asimple Over a year ago

Can you show error and code? I think it's another problem, not multiple import. So better to create another question and not make mess here.)

Asimple Over a year ago

@DicksonAfful Can you add code with my solution, so i can see whats the problem?

Paridhi Jain · Accepted Answer · 2020-05-27 19:54:46Z

0

Try this, you may need to create alias as:

components: {
    'AddMember': Members.AddMember, // use single quotes
    'EditMember': Members.EditMember,
},

answered May 27, 2020 at 19:54

Paridhi Jain

1905 bronze badges

Collectives™ on Stack Overflow

How to import multiple vue files as one

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related