Pass Laravel data to Vue component

Question

I'm creating a single page application (SPA) that uses Vue Router, therefore it is comprised mostly of Vue components with one blade component that puts it all together using

<router-view></router-view>

I want to know how I can pass data computed within my controller and pass it to a Vue component. The current way I'm doing it is by exposing extra API endpoints, for example in my controller I have:

public function countUsers()
{
        $userCount = DB::table('users')->count();
        return $userCount;
}

Then in api.php:

Route::get('usercount', 'UserMController@countUsers');

this way I can get the data within my Vue component using axios.get call to usercount.

Is there a better way of doing this? The data seems to take 1-2 seconds to display on the page and I can't imagine having this implementation for over 20 computations I need to do.

I've seen another method where you attach the data into the JavaScript context using the blade template, but I'm not sure how to get that to work for a SPA with Vue Routers.

tony19 · Accepted Answer · 2022-07-15 04:18:05Z

3

get userCount in your controller and pass it to normal blade file. You can pass the variable in vue like below.

<router-view userCount="{{userCount}}"></router-view>

then for accessing userCount variable in vue, you can load this variable from props.

export default {
  props: ['userCount'],
  name: 'router-view',
},
mounted:function(){
    let a = this;
    this.userCount = JSON.parse(this.userCount)
}

for more information you should read the documentation first. It will help you understand thoroughly. https://v2.vuejs.org/v2/guide/components-props.html

edited Jul 15, 2022 at 4:18

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 21, 2019 at 7:08

parth kabariya

2562 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pass Laravel data to Vue component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related