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">

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

And a Vue component


    export default {
        props: ['componentMessage'],

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