Hi, coders after a long I’m writing again on Vue and Laravel. Basically, in my journey on Laravel, I have faced this thing. How to pass data from Laravel blade template to Vue component.

You will find a bunch of resources on the internet. Every solution comes with a memory and processing cost.

So I have decided to share you the one simple solution that will not let you push towards a bad practice. Stick to this how to pass data Laravel Vue article and learn it with by creating a small application.

Passing data from Laravel to Vue

Laravel now comes with Vue as default front-end framework. I can confidently say the creator of Laravel has made the right choice.

Vue is a small and convenient javascript framework. Which made the task of developing complex SPA’s (Single Page Applications) much easier.

I have already compared it to React in Vue vs React post. If in case you are a React lover you must check it out.

In this tutorial, I will just show you the way to pass data. However, I will soon write an in-depth article with a CRUD application for better understanding. So make sure you subscribe Coders Diaries.

I guess you know how to setup Laravel with Vue so I’m going straight to the solution.

Creating blade template to pass data

I am creating a new blade file inside of the resources/views. Now write the general markup of HTML just make sure you add the following things.

<meta name="csrf-token" content="{{ csrf_token() }}">

A CSRF token to for our application inside the head and include the script app.js at the bottom of the body.

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

Now the final step. Vue needs a root element to be selected. So simply create a div inside the body with id app.

<div id="app">
	<!-- your vue component here -->
</div>

That’s all for now. Go ahead and change your routes to display the newly created file.

Accessing Laravel data inside Vue component

Once our blade template and routes are ready. It’s time to move to the Vue configuration.

First of all, create a new component inside resources/js/components. I’m naming it MessageComponent.vue as I will be showing how to pass data Laravel & Vue.

Inside the component script, add the props array and that’s the place where you will get the data passed from Laravel.

In our case, I’m passing a single data called propMessage. So go inside the props array and add it as follows.

props: ['propMessage'],

Now, as I got the data, I can use it anywhere in my component template as below.

<h4>{{ propMessage }}</h4>

Finally, our component is ready. It’s time to make it accessible in our blade template by declaring it as Vue component inside resources/js/app.js.

Vue.component('message-component', require('./components/MessageComponent.vue'))

Adding Vue component to Laravel Blade

Now the component is ready, you just have to add it inside the blade template.

<message-component
	prop-message = "This data is passed from blade template">
</message-component>

Make sure you’re using the name you have written inside app.js. The prop-message inside is the prop to be passed.

If you closely notice you will find the case of the prop is in kebab case. Whereas inside of the Vue component its accessed in camel case.

That’s the only tricky part here. So you must remember this key point while passing data from Laravel to Vue.

passing data from laravel to vue

I have attached a screenshot above of my code. Hope you have liked this approach of passing data from Laravel to Vue.

So share it and let your friends know about this simple way Laravel pass data to Vue props.


Avatar

Subham Mitra

Subham Mitra is a full-stack developer as well as an aspiring entrepreneur who is pursuing MCA and providing brilliant stuff for a great range of people's through Coders Diaries.

2 Comments

Avatar

Eduar · July 17, 2019 at 5:22 am

This works with plain text but not with a complete variable, i.e. a Model.
Do you know why?

Avatar

Chris Devriese · July 18, 2019 at 8:28 pm

Works great! thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.