Cannot pass props from Laravel blade file to Vue Component

Question

I'm trying to pass value from Laravel to Vue. But the props I get is always undefined (from console.log). I checked it's not the camel case issue. I really can't find where is the issue. Can anyone help, please? PS. I'm a laravel and Vue beginner. Thank you very much

blade.php file:

@extends('layouts.subject')

@section('content')
    <script src="{{ asset('js/subject/subjectapp.js') }}" defer></script>

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">

                        <sample message="HELLO"></sample>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

subjectapp.js file:

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


import 'babel-polyfill'
import Vuetify from 'vuetify';
import Sample from '../components/subject/Sample.vue';

Vue.use(Vuetify);


const sample = new Vue({
    el: 'sample',

    vuetify: new Vuetify(),
    components: {
        Sample
    },
    render: h => h(Sample),

});

Sample.vue file

<template>
    <v-app>
        <div class="row">
            <div class="col border m-2">
                MESSAGE
                {{message}}
            </div>
        </div>
    </v-app>
</template>
<script>
    export default {

        props: ['message'],

        created() {
            console.log(this.message);
        },

    }
</script>

Edit: extra info of my app:

data CANNOT be passed from blade.php to a vue component(A.vue) nested inside.

Data CAN be passed from a Vue component(A.vue) nested in the blade.php, to a vue component(B.vue) nested in that component(A.vue).

Furkan Atılgan Furkan Atılgan · Accepted Answer · 2020-05-15T08:35:46

You can add this to the end of your blade.php file

<script>
  window.prop1 = somePropValue;
  window.prop2 = somePropValue;
</script>

and access it on your vue file by calling window.prop1

This solution works for me. Here are my files:

<html>
<head>
  <script src="{{ asset('js/app.js') }}" defer></script>
</head>

<body>
  <div id="app">
    <main class="py-sm-4">
      <chat-component @if(isset($create_message)) user="{{ $create_message }}" @endif></chat-component>
    </main>
  </div>
</body>

<script>
  window.Laravel = {!! json_encode([
    'auth' => auth() -> check() ? auth() -> user() -> id : null,
  ])!!};

  window.LaravelUrl = "{{ url('') }}"
  window.user_id = "{{Auth::id()}}"
</script>
</html>

app.js file:

require('./bootstrap');

window.Vue = require('vue');

import WebRTC from 'vue-webrtc'; //video call plugin, not relevant to the answer

Vue.use(WebRTC); //video call plugin, not relevant to the answer

Vue.component('chat-component', require('./components/ChatComponent.vue'));

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

Vue example usages:

axios.post(window.LaravelUrl + `/send/${this.friend.session.id}`)
//
axios.post(window.LaravelUrl + "/send_calling_info", {
    session_id: this.friend.session.id,
    receiver_id: this.friend.id,
    caller_id: window.user_id
})
//
return this.session.blocked_by == window.Laravel.auth;

and some other usages inside axios.post()

Cannot pass props from Laravel blade file to Vue Component

1 Answers