Sharing Data Between Pages - Laravel Vue

Question

I am currently looking into Vue, as my front for my Laravel backend. Before doing anything I would like to ask a few things.

Let's assume I have a master template - a users Profile. When I first access a users profile, I get all his data (let's assume address - as another tab, personal data as another tab, and n Tabs specific ). Whenever I would access a user /user/1 I query all his sub-tabs and share this data between the tabs ( to reduce calls API ). Is such attempt possible?
When I took my first look at Vue, the first concern was that it uses Axios ( ajax ), and I do not really want to expose my endpoints, the profile data is publicly accessible so its not as simple as just gate it behind authentication. Is there a way to prerender data?

Thanks for any help.

you do make it a bit harder by not using a api. Vue is al about async. What @Maurice Vera answered is THE way to go for the first time loading a page with data that came from a controller. Just make sure you JSON encode/decode the data. — Niels Lucas
– Niels Lucas, Commented Aug 13, 2019 at 14:48
if you are scared of creating your own auth guards, just make your user object globally available to the views hdtuto.com/article/laravel-5-global-variable-in-all-views-file — Michael Mano
– Michael Mano, Commented Aug 16, 2019 at 5:21

JTinkers · Accepted Answer · 2019-08-13 14:08:10Z

1

Yes, definitely - Vue to Laravel communication is mainly done through API, especially if you cover entire front-end in Vue.js and not a mix of Vue and Bladee.
There are ways to 'kinda' prevent any abuses of your public API, but let's face it - anything can be walked around because limiting your public API will limit how your website works. One approach would be to configure session to wipe-on-close and then generate token when someone enters the website - this way, only people who have a valid token (are currently on the website) can use public API.. but it's a two-edged sword.

answered Aug 13, 2019 at 14:08

JTinkers

1,80911 silver badges23 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-15 05:17:43Z

1

I think the solution to both of your concerns would be to pass the data you need from the controller to your Blade template, and from there you echo it as json, and on you Vue side, you accept it as a component prop.

An example:

@extends('layouts.user-profile')

@section('user-data')
    <user-component
        :data="{{ $user }}"
    >
    </user-component>
@endsection

The important part here is :data={{ $user }}. Here you are echoing out the $user php variable, and Laravel will automatically convert it to json.

If you are not familiar with Vue component props, here is the documentation: https://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

edited Jul 15, 2022 at 5:17

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 13, 2019 at 14:10

Mauricio Vera

362 bronze badges

2 Comments

JTinkers Over a year ago

This ofcourse is a good solution if your stuff isn't meant to be fetched asynchronously - stuff like infinite scrolling on your posts can't be done with passing data via Bladee.

Niels Lucas Over a year ago

this is the way to go

Collectives™ on Stack Overflow

Sharing Data Between Pages - Laravel Vue

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related