Passing a prop from the Vue root instance into a component inside a blade template file

Question

Im trying to pass a prop from the root vue instance into the vue components which are located within a blade template file.

Blade Template File:

@extends('layouts.master')

@section('content')
    <header-0 on-window-load="{{ onPageLoad }}"><header-0>
    <header-search-modal></header-search-modal>
    <side-nav></side-nav>
@endsection

JavaScript root Vue instance:

var ComponentHeader = require('./components/Header.vue').default;
var ComponentHeaderSearchModal = require('./components/SearchModal.vue').default;
var ComponentSideNav = require('./components/SideNav.vue').default;


const app = new Vue({
    el: '#app',
    data(){
        return{ 
            onPageLoad: false
        }
    },
    components:{'header-0': ComponentHeader,
                'header-search-modal': ComponentHeaderSearchModal,
                'side-nav': ComponentSideNav
    },
    created(){
        window.onload = function(){
            this.onPageLoad = true;
        }
    }
});

As can be seen in the blade template file, doing on-window-load="{{ onPageLoad }}" will not work because blade seems to have no concept of the root Vue instance. So how do I pass a prop from the Vue root instance into a component inside a blade template file? is this possible?

Joseph Joseph · Accepted Answer · 2021-04-29T20:25:44

Your blade templates are rendered in the backend and returned to the browser as part of the request. However, your javascript is instantiated after the browser is done with the request. This means that your blade doesn't have any clue about javascript and therefore you can't use javascript in your blade template.

so to fix it you could access your root instance data from your component in this case, you want to get onPageLoad inside the ComponentHeader

you could access it of course from the component like this

this.$root.$data.onPageLoad

Passing a prop from the Vue root instance into a component inside a blade template file

1 Answers