laravel vue js component unable to compile

Question

I am new to laravel-VUE and is on a learning journey. Will appreciate any help. Laravel comes with VUE, all Vue components are registered in an app.js file like this:

require('./bootstrap');
window.Vue = require('vue');

Vue.component('apnavbar-component', require('./components/APnavbarComponent.vue'));
Vue.component('group-component', require('./components/GroupComponent.vue'));
Vue.component('product-component', require('./components/ProductComponent.vue'));

const app = new Vue({
    el: '#app',
});

In home.blade.php i have this:

@extends('layouts.app')
@section('content')
<apnavbar-component></apnavbar-component>
<group-component></group-component>
<product-component></product-component>
@endsection

In APnavbarComponent.vue I have this:

<template>
<h1>ap navbar component</h1>
<h3>{{ message }}</h3>
</template>
<script>
export default {
    data() {
        return {
            message: 'test message'
        }
    },
    mounted() {
        console.log("apnavbarcomponent mounted");
    }
}
</script>

this is the error message displayed in npm run watch console:

ERROR in ./node_modules/vue-loader/lib/template-compiler?
{"id":"data-v-b62d55fa","hasScoped":false,"buble":
{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js? 
type=template&index=0!./resources/js/components/APnavbarComponent.vue
(Emitted value instead of an instance of Error)
  Error compiling template:

  <h1>ap navbar component</h1>
  { message }

  - text "{ message }" outside root element will be ignored.

npm cannot compile this, and when I remove {{ message }}, it compiles and when i try to console.log the message, npm fails to compile again. Why is this so? Appreciate any help at all.

ESP32 · Accepted Answer · 2018-12-10 23:58:39Z

1

Vue can only have 1 root element inside of <template>

https://vuejsdevelopers.com/2018/09/11/vue-multiple-root-fragments/

Typically, you'll fix this problem by adding a "wrapper" div as a parent. This wrapper element has no display purpose, it's just there so your template complies with the single-root requirement.

answered Dec 10, 2018 at 23:58

ESP32

8,7732 gold badges46 silver badges71 bronze badges

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

1 Comment

NewProgrammer Over a year ago

oh my, thank you so much! adding a div after the template to wrap everything in made it work!

Collectives™ on Stack Overflow

laravel vue js component unable to compile

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