bart
55
2
Vue

Problem with more than one Vue component in a blade view

Posted 1 week ago by bart

Hey guys,

I'm currently struggling with a very weird issue. Never had that before and can't find anything wrong here. I created a standard Laravel 5.8 project. Its app.js file looks like this:

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

window.Vue = require('vue');

Vue.component('component-a', require('./components/ComponentA.vue').default);
Vue.component('component-b', require('./components/ComponentB.vue').default);
Vue.component('component-c', require('./components/ComponentC.vue').default);

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

My home.blade.php file now tries to use these components like this:

@extends('layout')

@section('content')
    <component-a />
    <component-b />
    <component-c />
@endsection

But only the first component gets rendered. Component B and C does not get displayed. These components are very simple Vue components which just have a simple template:

<template>
    <div>
        This is component A
    </div>
</template>

<script>
    export default {
        created() {
            console.log('A loaded')
        }
    }
</script>

I don't get any JS error in my console. B and C just doesn't get rendered and I can't see theit console.log() message in my console. When I check the generated app.js file which gets included into my page all components exist there:

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; });
var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c("div", [_vm._v("\n    This is component A\n")])
}
var staticRenderFns = []
render._withStripped = true



/***/ }),

/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/ComponentB.vue?vue&type=template&id=48af95e0&":
/*!*************************************************************************************************************************************************************************************************************!*\
  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/ComponentB.vue?vue&type=template&id=48af95e0& ***!
  \*************************************************************************************************************************************************************************************************************/
/*! exports provided: render, staticRenderFns */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; });
var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c("div", [_vm._v("\n    This is component B\n")])
}
var staticRenderFns = []
render._withStripped = true



/***/ }),

/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/ComponentC.vue?vue&type=template&id=489366de&":
/*!*************************************************************************************************************************************************************************************************************!*\
  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/ComponentC.vue?vue&type=template&id=489366de& ***!
  \*************************************************************************************************************************************************************************************************************/
/*! exports provided: render, staticRenderFns */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; });
var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c("div", [_vm._v("\n    This is component C\n")])
}
var staticRenderFns = []
render._withStripped = true

Did anyone came up with the same strange behavior? Thanks for ya help!

Please sign in or create an account to participate in this conversation.