How to Pass Data from Blade to Vue Components

Hello Developers

In this tutorial i will discuss about vue js props. That i will discuss step by step about laravel pass data from blade to vue. After completing this laravel vue js props tutorial you will learn how to properly pass data from Laravel Blade to Vue Components.

Sometimes we need to pass data from blade to vue component or sometimes need to pass data from vue component to vue component. But in this tutorial i will only discuss how we can pass data from laravel to vue components using props.

Let's have a look some vue js props example with laravel. Suppose this is our x.blade.php file.

Look here we are passing logged in user object to vue component using props. Now how we can catch it in vue file. In vue file we will catch this object using props like below.

Now if run this code, you will see the output in your console as like below.

In this procedure we can pass data from blade to vue component. But one more thing you need to keep in mind that. 

Note : HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. You should probably use “auth-user” instead of “authUser”.

That mean we can not use authUser type props in our blade file. See the below example to understand clearly.

And now in vue component

export default {
        props: ['userInfo'],
        data(){
            return {

            }
        },
        mounted() {
            console.log(this.userInfo)
    }
}

Look what is the output right now. See it gives us undefined in vue props.

And the console message is

What works

That mean we can not use camel case in our blade file. We have to single word or kebab case in blade file. Hope you got it. 

Remember :  If you use kebab case in blade file then you have to use camel case in your props. Otherwise it will show error.

Now you can use like below

And in vue components, use it like below

 export default {
        props: ['userInfo'],
        data(){
            return {

            }
        },
        mounted() {
            console.log(this.userInfo)
   }
}

Read also : Don’t Use v-if with v-for Elements

Then you will get the same output like above. Hope this passing data from Laravel Blade to Vue Components tutorial will help you.