Getting started with components, trying to nest them

Question

I am trying to nest two components in vuejs as I get started in it. I just don't want to jump into cli or webpack. So I wanted to do that without import/export. From the browser's console I get the warn:

[Vue warn]: Error compiling template:

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

1 |

This is the Component A

| ^^^^^^^^^^^^^^^^^^^^^^^^^^^

found in

--->

Tried a similar problem with answer here. VueJS nested components

but it seems to be an old version of vuejs. I could not make it work that way.

index.html:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="vue.js"></script>
    <meta charset="utf-8" />
</head>
<body>
    <div id="app">
        <component-a>
        </component-a>
    </div>
    <script src="app.js"></script>
</body>
</html>

app.js:

var ComponentB = {
    template: "<p>This is the Component B</p>",
}

var ComponentA = {
    template: '<p>This is the Component A</p><component-b></component-b>',
    components: {
        'component-b': ComponentB
    }
}

new Vue({
    el: '#app',
    components: {
        'component-a': ComponentA,
    }
});

Expected that template of component b show up inside the template of complement a.

Possible duplicate of Vue js error: Component template should contain exactly one root element — str

Arsenije Karpic Arsenije Karpic · Accepted Answer · 2019-08-14T07:56:47

In your component template you must have only one HTML element. You can wrap your elements in div.

var ComponentA = {
template: '<div><p>This is the Component A</p><component-b></component-b></div>',
components: {
    'component-b': ComponentB
}

Getting started with components, trying to nest them

1 Answers