Advantages for vue + vuex to Laravel
This article will help to develop advanced features to make your laravel application into real time world of interaction to users using server side rendering.
What is VueJs?
is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
To learn more about vuejs please click this link.
What is Vuex?
is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue’s official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.
If you want to learn about vuex please click this link.
When to implement vuex?
Vuex is powerful, efficient and takes care of a lot of stuff for us. So we should make more use of it, right? Wrong!
Just because a feature/tool/library offers a lot of advantages doesn’t mean it’s supposed to be used all the time.
The core of Vuex is a store that keeps all the state of our application in a central place. Generally, we make use of props and custom events to keep track of state. That is fine as long as our website has a few components that change state.
Only use it when you feel your project has the complexity that needs some help with managing it.
State management patterns
- The state, the source of truth that drives our app;
- The view, a declarative mapping of the state;
- The actions, the possible ways the state could change in reaction to user inputs from the view.
one-way data flow
However, the simplicity quickly breaks down when we have multiple components that share a common state:
- Multiple views may depend on the same piece of state.
- Actions from different views may need to mutate the same piece of state.
Why you should use Vue with Laravel?
This is one question that you need to take your time to answer. It is important to understand what Vue has to offer and what that means for your work.
We are going to explore a few reasons why you should use Vue with Laravel.
Everything happens on the frontend
Applications on the internet today are event-driven. They are built to ensure users have a seamless experience like they would if they used an application installed on their computer.
Everything now happens on the frontend and users never have to reload a page again (thank you JavaScript).
Reactive components make for an excellent event-driven app
It provides composable components that can be used however you wish. Given that it couples nicely with Laravel, you will only need to make a few trips to request data from your Laravel application and make UI changes by switching components without reloading the page.
You can trigger UI changes that are seamless with your Vue frontend, which in turn gives your users an amazing experience.
Single Page Application
Your entire application assets get loaded once (and most of it cached), all that your application does as the user engages with it is request data which typically requires low bandwidth to fulfill.
Easy to learn and use
Vue is easy to get into. It provides very few options for you as the developer and has a lot abstracted away. You feel like you are writing plain JavaScript when you use Vue and you can make a simple application with plain JavaScript and it remains valid in Vue.
Another great thing about Vue is that your valid HTML is also a valid Vue template. You can keep your CSS external or you can process it with JavaScript depending on your application needs. You can also take advantage of scoped styling, to apply style changes to a single component on the fly without the change affecting other components.
Basic Vue usage with Laravel
Creating you first laravel app
$ laravel new vueapp
When it’s done, go to your vueapp
$ cd vueapp
Install Vue and other JavaScript libraries your application needs to run:
$ npm install
Setup your application to reload when you make changes to your js assets:
$ npm run watch
Creating your first vue component
Making a Vue component is easy. If you open the resources/assets/js/app.js file, you would see that Vue has already been imported and a sample Vue component created.
There are so many ways to create your first vue component but for now please create resources/assets/js/components/Welcome.vue.
Using the component in your blade file
For this we will use the default blade file of which welcome.blade.php
Open the resources/assets/js/app.js file and add it to the following:
Into you welcome.blade.php file
That’s it you will see your vue component rendering to your page.
