VueJS error compiling template

Question

I just made my first project with VueJS and Vue-loader.

So I made my first component to show a simple message, it works fine when I make one message, but I get an error when I make multiple messages:

(Emitted value instead of an instance of Error) 
  Error compiling template:

  <message>This is a small message!</message>

  <message>Another one</message>

  - 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.

This is my code. I'm very new to this and I can't figure out what's wrong.

App.vue

<template>
    <message>This is a small message!</message>

    <message>Another one</message>
</template>

<script>
    import Message from './Components/Message.vue';

    export default {
        name: 'app',

        components: {
            Message,
        },

        data () {
            return {

            }
        }
    }
</script>

Message.Vue

<template>
    <div class="box">
        <p>
            <slot></slot>
        </p>
    </div>
</template>

<script>
    export default {

    }
</script>

<style>
    .box { background-color: #e3e3e3; padding: 10px; border: 1px solid #c5c5c5; margin-bottom: 1em;}
</style>

I hope somebody can help!

FitzFish · Accepted Answer · 2017-04-22 11:08:48Z

19

The error is pretty self-explanatory. You should have only one root element in each component. So just pack everything in a div.

<template>
    <div>
        <message>This is a small message!</message>
        <message>Another one</message>
    </div>
</template>

answered Apr 22, 2017 at 11:08

FitzFish

8,6193 gold badges33 silver badges43 bronze badges

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

1 Comment

Nieck Over a year ago

Ah of course! I was more searching inside my javascript, I completely missed it. Thanks!

Collectives™ on Stack Overflow

VueJS error compiling template

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related