Cannot render component inside component

Question

I have really basic Vue app (on Rails):

hello_vue.js:

import Vue from 'vue/dist/vue.esm'
import TurbolinksAdapter from 'vue-turbolinks'
Vue.use(TurbolinksAdapter)

import CollectionSet from '../collection_set.vue'

document.addEventListener('turbolinks:load', () => {
  const app = new Vue({
    el: '#app',
    components: { CollectionSet }
  })
})

collection_set.vue:

<script>
import Collectable from './collectable.vue'
export default {
  components: { Collectable }
}
</script>

<template>
  <p>test</p>
  <collectable />
</template>

collectable.vue:

<script>
export default {
  name: 'collectable'
}
</script>
<template>
  <p>test 2</p>
</template>

my webpage:

<div id="app"><collection-set /></div>

With above example I don't see anything, but when I remove <collectable /> from collection_set.vue, I see test. I don't have any errors.

Why collectable is not being rendered?

Have you exported collectable? collection_set might be not getting anything when importing Collectable otherwise. — Anuradha Kumari
– Anuradha Kumari, Commented May 4, 2019 at 16:41
@AnuradhaKumari In collectable.vue I have: <script>export default { name: 'Collectable' }</script>, do you mean it? — Szymon Przybył
– Szymon Przybył, Commented May 4, 2019 at 16:42
ah yes. Could it be an issue with casing. I see it names as Collectable with capital 'C', but while using, we are using small case <collectable />. Can you please verify on that — Anuradha Kumari
– Anuradha Kumari, Commented May 4, 2019 at 16:47
@AnuradhaKumari When I changed it to collectable, still nothing gets rendered. — Szymon Przybył
– Szymon Przybył, Commented May 4, 2019 at 16:48

Anuradha Kumari · Accepted Answer · 2019-05-04 16:58:34Z

3

Change the template code of collection_set.vue to

<template>
 <div>
    <p>test</p>
  <collectable />
</div>
</template>

the reason for error is that Component template should contain exactly one root element Here we were trying to craete two root elements p and collectable

Now that I wrapped it within a parent div container, it works just fine. Please try and let me know if it helps.

One suggestion is that always check into console of browser devtools to check what could be the issue. In this case, the console gave the exact error, also the code compilation failed with same error.

answered May 4, 2019 at 16:58

Anuradha Kumari

7035 silver badges9 bronze badges

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

4 Comments

Szymon Przybył Over a year ago

My hero, works! But now, why I do not get any error about not having one root element?

Anuradha Kumari Over a year ago

cool...Ideally you should have got error while serving the application itself, as the code compilation itself fails, also I got the same error in browser devtools.

Szymon Przybył Over a year ago

I don't see anything in my browser devtools (chrome), do you know what can be the reason?

Anuradha Kumari Over a year ago

in console tab of devtools, check if all options from 'All Levels' dropdown are checked (specifically error option should be checked.)

Omer Tal · Accepted Answer · 2019-05-06 12:51:05Z

0

In Vue, each component must have only ONE root element, meaning you need to have a tag like <p> or <div> and inside it all your template.

edited May 6, 2019 at 12:51

answered May 5, 2019 at 9:35

Omer Tal

3712 silver badges9 bronze badges

2 Comments

Szymon Przybył Over a year ago

But do you know why I could get no errors about more than one root element?

Omer Tal Over a year ago

The only thing that comes to my mind is perhaps not working with a lint or the Vue Webtools extension... The best practice is to always have a root tag, suggesting <div> or <p> to every component.

Collectives™ on Stack Overflow

Cannot render component inside component

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related