Pass data from Blade template to Vue component

  laravel, laravel-blade, vue-component, vue.js, vuejs2

This is a new-comer question. I have a Blade template:

<div id="app">
    <example-component
    :componentMessage="appMessage"
    ></example-component>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: function() {
            return {
                appMessage: {{$message}}
            }
        }
    })
</script

And a Vue component
ExampleComponent.vue

<template>
    <p>{{componentMessage}}</p>
</template>

<script>
    export default {
        props: ['componentMessage'],
    }
</script>

So the data flow will look like this: $message -> appMessage -> componentMessage

The <example-component> is not working because I haven’t imported it properly.

How am I supposed to use Example component inside Blade template? Providing that I’m using Vue CDN and I want to keep the app declaration right on the Blade template for fancy data transformation (with Blade syntaxes) before passing it to component with appMessage in the middle?

I have been searching for documents. Some requires app declaration in resources/js/app.js, but if I follow this way, I can not pass data to app with Blade mustache syntax.

Source: Laravel

Leave a Reply