Vue component only shows up as Tag and didnt gets rendered












0















One component on my vue site isn`t rendered correctly. It is registered like a lot of other components, they are working fine. But when i call only appears in the DOM. Why is this component behaving so strangely?



/index.vue



<template>
<emailResults></emailResults>
</template>
<script>
import { emailResults } from ../components;
export default {
components: {
emailResults
}
};
</script>


/emailResults.vue



<template>
...
</template>
<script>
export default {
name: 'emailResults',
}
</script>


/index.js



import emailResults from './emailResults'

export{
emailResults
}









share|improve this question

























  • Can you explain more because I didn't get what you're asking

    – Harsh Patel
    Jan 3 at 12:22











  • Ok so the component isn´t rendered corretly but is importet like other components they are working fine. In the same time i get a [Vue warn]: Unknown custom element: <emailResults> - did you register the component correctly? For recursive components, make sure to provide the "name" option. but name is declared. I am confused.

    – blitze299
    Jan 3 at 12:25













  • You have to pass name of the component here emailResults } from ../components;

    – Harsh Patel
    Jan 3 at 12:35











  • I tried this with the export default { name: '}

    – blitze299
    Jan 3 at 13:04
















0















One component on my vue site isn`t rendered correctly. It is registered like a lot of other components, they are working fine. But when i call only appears in the DOM. Why is this component behaving so strangely?



/index.vue



<template>
<emailResults></emailResults>
</template>
<script>
import { emailResults } from ../components;
export default {
components: {
emailResults
}
};
</script>


/emailResults.vue



<template>
...
</template>
<script>
export default {
name: 'emailResults',
}
</script>


/index.js



import emailResults from './emailResults'

export{
emailResults
}









share|improve this question

























  • Can you explain more because I didn't get what you're asking

    – Harsh Patel
    Jan 3 at 12:22











  • Ok so the component isn´t rendered corretly but is importet like other components they are working fine. In the same time i get a [Vue warn]: Unknown custom element: <emailResults> - did you register the component correctly? For recursive components, make sure to provide the "name" option. but name is declared. I am confused.

    – blitze299
    Jan 3 at 12:25













  • You have to pass name of the component here emailResults } from ../components;

    – Harsh Patel
    Jan 3 at 12:35











  • I tried this with the export default { name: '}

    – blitze299
    Jan 3 at 13:04














0












0








0








One component on my vue site isn`t rendered correctly. It is registered like a lot of other components, they are working fine. But when i call only appears in the DOM. Why is this component behaving so strangely?



/index.vue



<template>
<emailResults></emailResults>
</template>
<script>
import { emailResults } from ../components;
export default {
components: {
emailResults
}
};
</script>


/emailResults.vue



<template>
...
</template>
<script>
export default {
name: 'emailResults',
}
</script>


/index.js



import emailResults from './emailResults'

export{
emailResults
}









share|improve this question
















One component on my vue site isn`t rendered correctly. It is registered like a lot of other components, they are working fine. But when i call only appears in the DOM. Why is this component behaving so strangely?



/index.vue



<template>
<emailResults></emailResults>
</template>
<script>
import { emailResults } from ../components;
export default {
components: {
emailResults
}
};
</script>


/emailResults.vue



<template>
...
</template>
<script>
export default {
name: 'emailResults',
}
</script>


/index.js



import emailResults from './emailResults'

export{
emailResults
}






vue.js vue-component






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 3 at 14:52









vahdet

2,17841636




2,17841636










asked Jan 3 at 11:42









blitze299blitze299

32




32













  • Can you explain more because I didn't get what you're asking

    – Harsh Patel
    Jan 3 at 12:22











  • Ok so the component isn´t rendered corretly but is importet like other components they are working fine. In the same time i get a [Vue warn]: Unknown custom element: <emailResults> - did you register the component correctly? For recursive components, make sure to provide the "name" option. but name is declared. I am confused.

    – blitze299
    Jan 3 at 12:25













  • You have to pass name of the component here emailResults } from ../components;

    – Harsh Patel
    Jan 3 at 12:35











  • I tried this with the export default { name: '}

    – blitze299
    Jan 3 at 13:04



















  • Can you explain more because I didn't get what you're asking

    – Harsh Patel
    Jan 3 at 12:22











  • Ok so the component isn´t rendered corretly but is importet like other components they are working fine. In the same time i get a [Vue warn]: Unknown custom element: <emailResults> - did you register the component correctly? For recursive components, make sure to provide the "name" option. but name is declared. I am confused.

    – blitze299
    Jan 3 at 12:25













  • You have to pass name of the component here emailResults } from ../components;

    – Harsh Patel
    Jan 3 at 12:35











  • I tried this with the export default { name: '}

    – blitze299
    Jan 3 at 13:04

















Can you explain more because I didn't get what you're asking

– Harsh Patel
Jan 3 at 12:22





Can you explain more because I didn't get what you're asking

– Harsh Patel
Jan 3 at 12:22













Ok so the component isn´t rendered corretly but is importet like other components they are working fine. In the same time i get a [Vue warn]: Unknown custom element: <emailResults> - did you register the component correctly? For recursive components, make sure to provide the "name" option. but name is declared. I am confused.

– blitze299
Jan 3 at 12:25







Ok so the component isn´t rendered corretly but is importet like other components they are working fine. In the same time i get a [Vue warn]: Unknown custom element: <emailResults> - did you register the component correctly? For recursive components, make sure to provide the "name" option. but name is declared. I am confused.

– blitze299
Jan 3 at 12:25















You have to pass name of the component here emailResults } from ../components;

– Harsh Patel
Jan 3 at 12:35





You have to pass name of the component here emailResults } from ../components;

– Harsh Patel
Jan 3 at 12:35













I tried this with the export default { name: '}

– blitze299
Jan 3 at 13:04





I tried this with the export default { name: '}

– blitze299
Jan 3 at 13:04












1 Answer
1






active

oldest

votes


















1














You have an index.vue and index.js file. Depeding on your bundler's setup, it might try to import from the wrong file here:



import {
emailResults
} from ../components;


Try being explicit:



import {
emailResults
} from ../components/index.js;





share|improve this answer
























  • Thanks for your answer. I also just noticed that Vue generated this error even though the name is set.

    – blitze299
    Jan 3 at 12:58











  • [Vue warn]: Unknown custom element: <emailResults> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    – blitze299
    Jan 3 at 12:58











  • Yeah this error comes up because you did not register the component, likely because the import statement produced undefined because of what I described.

    – Linus Borg
    Jan 3 at 14:42











  • Ok thanks but in my opinion the index.js imports the component and the index.vue is only the starting point of the app which uses the components.

    – blitze299
    Jan 3 at 15:38











  • Well, console.log emailResults in your index.vue file and see what you get.

    – Linus Borg
    Jan 4 at 9:15











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54021597%2fvue-component-only-shows-up-as-componentname-tag-and-didnt-gets-rendered%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









1














You have an index.vue and index.js file. Depeding on your bundler's setup, it might try to import from the wrong file here:



import {
emailResults
} from ../components;


Try being explicit:



import {
emailResults
} from ../components/index.js;





share|improve this answer
























  • Thanks for your answer. I also just noticed that Vue generated this error even though the name is set.

    – blitze299
    Jan 3 at 12:58











  • [Vue warn]: Unknown custom element: <emailResults> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    – blitze299
    Jan 3 at 12:58











  • Yeah this error comes up because you did not register the component, likely because the import statement produced undefined because of what I described.

    – Linus Borg
    Jan 3 at 14:42











  • Ok thanks but in my opinion the index.js imports the component and the index.vue is only the starting point of the app which uses the components.

    – blitze299
    Jan 3 at 15:38











  • Well, console.log emailResults in your index.vue file and see what you get.

    – Linus Borg
    Jan 4 at 9:15
















1














You have an index.vue and index.js file. Depeding on your bundler's setup, it might try to import from the wrong file here:



import {
emailResults
} from ../components;


Try being explicit:



import {
emailResults
} from ../components/index.js;





share|improve this answer
























  • Thanks for your answer. I also just noticed that Vue generated this error even though the name is set.

    – blitze299
    Jan 3 at 12:58











  • [Vue warn]: Unknown custom element: <emailResults> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    – blitze299
    Jan 3 at 12:58











  • Yeah this error comes up because you did not register the component, likely because the import statement produced undefined because of what I described.

    – Linus Borg
    Jan 3 at 14:42











  • Ok thanks but in my opinion the index.js imports the component and the index.vue is only the starting point of the app which uses the components.

    – blitze299
    Jan 3 at 15:38











  • Well, console.log emailResults in your index.vue file and see what you get.

    – Linus Borg
    Jan 4 at 9:15














1












1








1







You have an index.vue and index.js file. Depeding on your bundler's setup, it might try to import from the wrong file here:



import {
emailResults
} from ../components;


Try being explicit:



import {
emailResults
} from ../components/index.js;





share|improve this answer













You have an index.vue and index.js file. Depeding on your bundler's setup, it might try to import from the wrong file here:



import {
emailResults
} from ../components;


Try being explicit:



import {
emailResults
} from ../components/index.js;






share|improve this answer












share|improve this answer



share|improve this answer










answered Jan 3 at 12:41









Linus BorgLinus Borg

12k13839




12k13839













  • Thanks for your answer. I also just noticed that Vue generated this error even though the name is set.

    – blitze299
    Jan 3 at 12:58











  • [Vue warn]: Unknown custom element: <emailResults> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    – blitze299
    Jan 3 at 12:58











  • Yeah this error comes up because you did not register the component, likely because the import statement produced undefined because of what I described.

    – Linus Borg
    Jan 3 at 14:42











  • Ok thanks but in my opinion the index.js imports the component and the index.vue is only the starting point of the app which uses the components.

    – blitze299
    Jan 3 at 15:38











  • Well, console.log emailResults in your index.vue file and see what you get.

    – Linus Borg
    Jan 4 at 9:15



















  • Thanks for your answer. I also just noticed that Vue generated this error even though the name is set.

    – blitze299
    Jan 3 at 12:58











  • [Vue warn]: Unknown custom element: <emailResults> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    – blitze299
    Jan 3 at 12:58











  • Yeah this error comes up because you did not register the component, likely because the import statement produced undefined because of what I described.

    – Linus Borg
    Jan 3 at 14:42











  • Ok thanks but in my opinion the index.js imports the component and the index.vue is only the starting point of the app which uses the components.

    – blitze299
    Jan 3 at 15:38











  • Well, console.log emailResults in your index.vue file and see what you get.

    – Linus Borg
    Jan 4 at 9:15

















Thanks for your answer. I also just noticed that Vue generated this error even though the name is set.

– blitze299
Jan 3 at 12:58





Thanks for your answer. I also just noticed that Vue generated this error even though the name is set.

– blitze299
Jan 3 at 12:58













[Vue warn]: Unknown custom element: <emailResults> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

– blitze299
Jan 3 at 12:58





[Vue warn]: Unknown custom element: <emailResults> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

– blitze299
Jan 3 at 12:58













Yeah this error comes up because you did not register the component, likely because the import statement produced undefined because of what I described.

– Linus Borg
Jan 3 at 14:42





Yeah this error comes up because you did not register the component, likely because the import statement produced undefined because of what I described.

– Linus Borg
Jan 3 at 14:42













Ok thanks but in my opinion the index.js imports the component and the index.vue is only the starting point of the app which uses the components.

– blitze299
Jan 3 at 15:38





Ok thanks but in my opinion the index.js imports the component and the index.vue is only the starting point of the app which uses the components.

– blitze299
Jan 3 at 15:38













Well, console.log emailResults in your index.vue file and see what you get.

– Linus Borg
Jan 4 at 9:15





Well, console.log emailResults in your index.vue file and see what you get.

– Linus Borg
Jan 4 at 9:15




















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54021597%2fvue-component-only-shows-up-as-componentname-tag-and-didnt-gets-rendered%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Monofisismo

Angular Downloading a file using contenturl with Basic Authentication

Olmecas