DEV Community

Cover image for Four ways to pass data from Laravel to Vue

Four ways to pass data from Laravel to Vue

Andrew Schmelyun on September 21, 2019

I’ve been working on projects that use both Vue and Laravel for the last two to three years, and during the start of each’s development I have to a...
Read full post
Collapse
 
starvsion profile image
Junhai •

2 things

  1. If you use @json, you wrap it with single quote on html
  2. 5th way, using laravel echo and push notifications
Collapse
 
peckyboy profile image
peckyboy •

Thanks a lot for pointing out the single quote ( number 1). I was almost already dismissing this post

Collapse
 
aschmelyun profile image
Andrew Schmelyun •

Nice catches! I've wrote about #2 before, love using echo.

Collapse
 
chrispage1 profile image
chrispage1 •

Nice article! I'd personally recommend using Laravel Passport. If you authenticate using Laravels standard auth procedure you can then add Laravel Passports CreateFreshApiToken middleware (docs here). This lets you consume your API locally without having to worry about tokens.

It also has the added bonus of being able to take advantage of the power of oAuth with your API endpoints if you expand going forward.

Collapse
 
eugenevdm profile image
Eugene van der Merwe •

I'm trying to build a hybrid Laravel Vue app and I'm really struggling with global variables, most specifically things like "does the entire application have inventory management turned on or not?". This is generally a read-only variable that should be available "everywhere". I normally put this in .env but I have a global true/false setting as well, inventory_enabled.

I like the windows.variable_name idea, but where I get confused is:

  1. When to use Vue.prototype?

  2. In your example, you mention "process.env.API_DOMAIN". Where does this extra variable process.env come from? Is this now window.process.env?

  3. At what point do I invoke Vuex? My application heavily relies on Vuex but when refreshing the browser window refresh Vuex state also get trashed so now I'm moving to local storage...now do I also store my global setting in Vuex AND localstorage?

The reason why I'm building this hybrid application is I still want to use Blade and scaffolding and so on, and all the other goodies that come with Laravel, but there are large parts of my front-end that needs Vue's reactivity to make the pages more responsive and interactive..

The global variables (.env style) are really getting me down. I just want one simple way.. :-)

Collapse
 
michi profile image
Michael Z •

Rather than echoing manually you can also let this package do it for you: github.com/laracasts/PHP-Vars-To-J...

Collapse
 
ozankurt profile image
Ozan Kurt •

Any worse suggestions? :D

Collapse
 
sebalr profile image
Sebastian Larrieu • • Edited

I honestly believe that the best answer is 'using a rest API'. Mix a single page framework with php can create a huge mess.

Edit: Lumen and Vue/Angular it's a great combination

Collapse
 
metadeck profile image
metadeck •

Have you tried inertia yet github.com/inertiajs/inertia-larav...

Collapse
 
emmanuelyanum profile image
Automaton • • Edited

great post. really learnt something new

Collapse
 
phillipmwaniki profile image
Phillip Mwaniki Nzuli •

You can do all this in the View::composer. You can even access the store and add variables to it then export with View::share('store', json_encode($store));

Collapse
 
stevetwitte profile image
Stephen Taylor Witte •

Good overview. I actually worked at a company that stored custom JS components on the window. It worked and for the small number of components that we had, organization never became an issue.