I am using Vue all over the place in my Laravel project. I have a couple of views, and a dozen components inside these views that I have registered in app.js. Inside these components I have more components. Now the fun part starts when I want one component to communicate with another. What is the most efficient way to exchange information between different Vue components given that these are seperated by different laravel views (via include)?
The proper way for many components across your project to update when there are state changes would be to use VueX.
VueX moves your entire app state, methods, etc. to a centralized location that your components can leverage.
https://vuex.vuejs.org/en/intro.html
Related
I have a livewire component called Cart.
If the user open this component in multiple devices at the same time (i.e. mobile and desktop, or open it in multiple browser tabs), and add an item to the cart in the mobile browser, is there a way to refresh the component in desktop browser?
I know these components are independent of each other, so I'm thinking of a solution where I have to store, for example, the component ID (or something like that) and create the another one based on it.
Is there a well-developed solution to this?
I'm not aware of any existing solution like this but you could save the cart in DB and then retrieve it for all your platforms. To make it so it's always synced on both platforms you could build your mobile application on APIs or otherwise use something like the Broadcasting within Laravel or a package like Laravel WebSockets.
Livewire is more for building dynamic interfaces removing the complexity of making AJAX requests in the background and doesn't support multiple platforms the way you are wanting.
I'm building a Narrow Casting System that displays tickets from a 3rd party API. The backend is handled with Laravel, and the frontend with Vue.
I am wondering if I should get all the components in the blade.php file or make a Vue component which loads them individually (A wrapper for the components, sort of), and then loading a single component in the blade.php.
Loading components individually give you the benefit of lazy loading (async loading), making you app load fast and perform better, saving requests loading a single bundle with all you need.
Putting all components in a blade file is not readable, hard to maintain, you can't say if that component is a dependency of another or is an entry point.
How to update data in multiple places without reloading the page in Vue.js?
This is my example.
When I add a new application, a new reminder is created. How to use this data in different places on the page?
Important: all elements are in different components.
Use Vuex or a global event bus depending on the complexity of your application.
If your application is starting to become more enriched with Vue components that need to communicate beyond simple child/parent and parent/child communications, then Vuex should be a good fit.
I am not going to go into depth about the technicalities because that information can be found in the documentation. Good luck.
I'm starting a new large-scale application and after hearing a lot about VueJS + Laravel combination i thought of using it. I followed Laracasts' Learn Vue 2: Step By Step series and some tutorials to understand how it works.
But have few questions in mind:
Why do we even need to use Vue with Laravel. I understand that we can create component like <user-profile></user-profile> in Vue, and then use it in Laravel Blade. But it looks like over-complication things? Firstly we pass data from controller to blade, and then further pass it to vue. Why do we need to do that?
Laravel and Vue both have their own routing system. Which one to use?
How to structure an app using Laravel + Vue
PS. I'm making an application that will mostly be used on mobile devices.
moved from comment
Why do we even need to use Vue with Laravel.
Although you probably already knew, Vue is just one of many javascript frontend frameworks (libs?) You can consume the data send from the server any way you want. Vue is just the sister-framework of Laravel. The only thing you can probably say as to why they are mentioned together is that you can "talk" (interface) easily between them using json objects. Javascript is meant to make your page interactive, have behaviour. Use it when you need this.
Laravel and Vue both have their own routing system. Which one to use?
Whatever you want, do you want a "single page" (blade) that is rendered in 3 different pages by Vue, say like some kind of Wizard form. It really depends on where you want to put the load. I think you can think of use-cases where client side page rendering would be better, but most of the time server sided will be a great choice.
Single page applications are more snappy (faster) after initial load, but server side rendered applications are better for SEO in general. There are also ways to let a SPA render on the server to improve SEO however. And this we we can keep the discussion going for some while.
How to structure an app using Laravel + Vue
Laravel has already an example vue file under resources/assets/js/app.js. So it is safe to assume you can put everything there.
I'm going to launch a new project with this two frameworks (I like):
Laravel 5
Vue.js
The Frontend developer prepares the HTML's in atomic design, generated with patternlab.io.
Now I'm looking how I can integrate the patternlab.io project that I don't have to rewrite all the elements in a blade template.
I found some implementations combining Patternlab & Laravel using TwigBridge, Laratash Laravel extensions.
But I've some thoughts:
In the blade templates there is: logic, conditions, loops,.... If I combine patternlab and laravel then I need to put all this in the patternlab project.
Because of using vue.js I need to add also these tags to the patternlab templates
So I think it's not the best choice to integrate the patternlab.io templates in the laravel project.
My idea was:
Frontend DEV uses patternlab to create the templates
Laravel automatically generates & imports the CSS Stylesheet generated in patternlab
The Backend Developers copy the patternlab - molecules manually in the blade templates and add their own logic
If the Frontend DEV make changes on CSS, it's fine - we'll run in no issues; after rerunning the laravel gulp process to update the css files we have the new updates.
If the Frontend DEV makes some changes on a html structure we need to manually adjust them.
Is there a better solution combining Atomic Design, Vuejs and Laravel? How do you deploy atomic design in your CMS?
In the last three Vue/Laravel projects we've created we'v stopped using PHP as a rendering engine all together and used Vue exclusively. Laravel is still a really great framework for writing business logic and apis in a clean testable way – but we've decided to never use blade again.
Typically the issue you run into when trying to create a JS rendered application with a PHP backend is the lack of server side rendering. To solve this problem I've turned to a new project out of the Vue community, Nuxt.js (I have no affiliation with them, just a happy developer). Nuxt lets you write vue components and have them be both server side rendered, and rendered in the browser after the initial page load.
This allows us to completely decouple all of the rendering responsibilities away from Laravel and keep it in a single location, so no need to do blade and Vue – it's all Vue.
The only downside is that you'll need 2 servers Node.js and PHP.