vue.js - Issues globally scaffolding vue in laravel

Question

I have a laravel 8 project and in there I have a main.blade.php file that has @sections and @yield()s content. I have installed vue v2.x and am having issues placing the parent id of the root vue component. I keep getting this error on some pages in my app but not all.

[Vue warn]: Error compiling template:

tag <section> has no matching end tag.
  
<section class="content">

I can read so of course I check if the section tag it is complaining about has a matching closing tag. It does:

main.blade.php

 <div id="app">
     <section class="content">
         @yield('content')
     </section>  //matching closing section tag
 </div>

resources/app.js

import Vue from "vue";

window.Vue = require('vue');

Vue.component('spinner-button', require('./js/components/spinner-button.vue').default);

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

A lot of other files using my main.blade.php file via @extends('templates.main')

My component works fine on some pages but on other pages I get the browser error stated above. Where should I place the main app id?

question from:https://stackoverflow.com/questions/65945252/issues-globally-scaffolding-vue-in-laravel

Answer 1

Waitting for answers