Passing backend data to Vue #10

diemah77 · 2019-02-26T19:29:01Z

I wonder what is the best way to pass some data like logged-in user or breadcrumbs created by laravel to Vue.
By now I'm merging all of the data and passing it through props to each of the page components. But it feels like a hack and I think there might be a better solution.
What would you suggest?

Juhlinus · 2019-03-04T01:29:05Z

In your app/Providers/AppServiceProvider.php you can do something along the following:

View::composer('*', function ($view) {
    if (Auth::user()) {
        $view->with('shared', [
            'auth' => [
                'user' => [
                    'id' => Auth::user()->id,
                    'name' => Auth::user()->name,
                    'email' => Auth::user()->email,
                ],
            ],
        ]);
    }
});

And in your resources/views/app.blade.php just below your <body> tag:

<script>
    window.shared = @json($shared ?? []);
</script>

diemah77 · 2019-03-04T17:56:19Z

That's all true and correct for the authenticated user, as the shared data doesn't change for all admin routes.
But the issue arises when passing breadcrumbs to the window object. In this case turbolinks doesn't override the breadcrumbs for each route, but creates an addditional script tag within the head tag.

By now I'm passing the breadcrumbs collection to each page component and then to the root layout component where breadcrumbs are rendered. Ideally I would like to access them globally.

Juhlinus · 2019-03-04T22:33:28Z

That would be more clean approach, yes. As far as I understood it from Twitter @reinink is dropping Turbolinks entirely and going with a straight Vue and Laravel approach. Previously he mentioned something along the lines of "TurboVue", but I swear I saw a tweet stating that it will be dropped for a more favorable and straightforward solution.

Using this repository as a base seems a bit clunky when it comes to issues like this. I'm currently using this in one of my projects, but have prepared myself for a refactor when the aforementioned solution comes.

diemah77 · 2019-03-13T12:31:19Z

For those interested, I now do something like this:

render: h => h(
            Vue.component('admin'), {
                props: JSON.parse(root.dataset.props)
            }
      )

I'm creating the layout component and passing the page component name as prop:

ViewFactory::macro('component', function ($name, $data = []) use ($auth) 
        {
            $data['name'] = $name;
            $data['auth'] = $auth;

            return View::make('dashboard', [
                'data' => $data, 
            ]);
        });

In the layout component I have a dynamic component that renders the passed page component:

<transition tag="div" name="fade" appear>
	<component :is="data.name" :parentData="childProps" @title="setTitle"></component>
</transition>

where props and childProps look like this:

props: {
	data: {
		type: Object,
		required: true
	}
},

computed: {
	childProps()
	{
	       let props = Object.assign({}, this.data)
			
		delete props.auth
		delete props.breadcrumbs
		delete props.name

		return props
	}
}

theprobugmaker · 2019-10-09T20:42:35Z

What this @ means on @json? Is that from blade or Vue?

reinink · 2019-10-09T20:43:31Z

@zefexdeveloper That's a Blade directive for outputting a PHP variable as JSON.

theprobugmaker · 2019-10-09T20:45:55Z

The same for @title? I'm asking this cause It's kinda confusing. I mean, if I have an array being passed down to the view I could just do something like :tags="{{ $tags }}" and then Vue can traversal it, right?

reinink · 2019-10-09T20:48:04Z

No, @title is in a Vue component, and that's an event. And yes, that is confusing...two different languages/frameworks.

If you're looking at this repo, I highly recommend checking out my Inertia.js project. That's really where the thinking from this repo (blog post) lead me.

theprobugmaker · 2019-10-09T20:50:49Z

@reinink Thank you very much, I heard about Inertia.js before and it looks amazing, I will definitely take a look and probably refactor the project later.

Right now I'm using inline components with Vue because it sucks to pass down localization information down from Laravel to Vue components. It will do the trick now, gotta get things done but later I will definitely refactor and make it better.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Passing backend data to Vue #10

Passing backend data to Vue #10

diemah77 commented Feb 26, 2019

Juhlinus commented Mar 4, 2019 •

edited

Loading

diemah77 commented Mar 4, 2019

Juhlinus commented Mar 4, 2019 •

edited

Loading

diemah77 commented Mar 13, 2019 •

edited

Loading

theprobugmaker commented Oct 9, 2019

reinink commented Oct 9, 2019

theprobugmaker commented Oct 9, 2019

reinink commented Oct 9, 2019

theprobugmaker commented Oct 9, 2019

Passing backend data to Vue #10

Passing backend data to Vue #10

Comments

diemah77 commented Feb 26, 2019

Juhlinus commented Mar 4, 2019 • edited Loading

diemah77 commented Mar 4, 2019

Juhlinus commented Mar 4, 2019 • edited Loading

diemah77 commented Mar 13, 2019 • edited Loading

theprobugmaker commented Oct 9, 2019

reinink commented Oct 9, 2019

theprobugmaker commented Oct 9, 2019

reinink commented Oct 9, 2019

theprobugmaker commented Oct 9, 2019

Juhlinus commented Mar 4, 2019 •

edited

Loading

Juhlinus commented Mar 4, 2019 •

edited

Loading

diemah77 commented Mar 13, 2019 •

edited

Loading