CODEWITHSUNDEEP
vue.jsvuejs2
Dickson Afful
Dickson Afful

Reputation: 838

How to import multiple vue files as one

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.

Upvotes: 1

Views: 2820

Answers (3)

Paridhi Jain
Paridhi Jain

Reputation: 190

Try this, you may need to create alias as:

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

Upvotes: 0

Asimple
Asimple

Reputation: 650

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

Upvotes: 0

Eli Sigal
Eli Sigal

Reputation: 100

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

Upvotes: 1

Related Questions