• +91 9806724185,+91 9685733903
  • +91 9806724185

If we have used a recent Laravel version, you would notice it usually comes with Vue bundled in with other tools like Bootstrap and jQuery. You would also notice in Laravel documentation that they gave a small introduction to using Vue components.

Vuejs and laravel

Vuejs and laravel

# Vuejs Development:
Vue is a progressive framework for building user interfaces”. Vue at its core is focused on the view layer only of an application, so integrating with other platforms or existing applications is really easy. You can also use Vue on its own to build sophisticated single-page applications.

# How does Vue work?
If you have programmed for the web before the era of event-driven frontend JavaScript frameworks, you would understand there are considerable difficulties and inefficiencies that arise from trying to update the Document Object Model (DOM).

To update the DOM directly means you would have to take the page, make the change to a small part of it, then reload the entire DOM so the changes can take effect. If say you are watching a YouTube video and there is a new comment, the entire page would reload and your video would have to start afresh.

Vue tries to solve these challenges by utilizing a virtual DOM to manage the view a user sees. Vue essentially creates a copy of the DOM and stores it. When a change is made to any part of the DOM, it just updates only that section of the DOM without reloading the DOM. This means the comments would update without you even noticing it.

Vue provides reactive and composable view components. Vue responds to events and triggers changes in the DOM instantaneously. Its composable components can be selected and assembled in various combinations to satisfy whatever need arises. You can have components for everything and reuse them however you need.

• Why we use Vue with Laravel Development Services:

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 :

Every web application is event-driven in today's world. 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.

• What makes an event-driven app: Reactive Components :

Vue lets you build a full-scale application that is event-driven and has all activity completely handle on the frontend. It also 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. It could be as simple as making a text on your page editable or swapping out an entire component to load up a video requested by a user without reloading the page.

Given, Vue’s speed and performance, this happens very fast and smoothly without taking up so much of your computer resources.

• Creating Optimal complex frontend pages :

If you think of building an application with parts that need to update frequently, you have no other choice than to make the frontend run completely on JavaScript.

The challenge with vanilla JavaScript or jQuery or other JavaScript libraries that do not have a virtual DOM is that you quickly hit performance issues with the frequency of update increases or the volume of data to track for changes increases significantly. Changes to the DOM will gradually cease to be instantaneous and you begin to experience noticeable performance lags.

When you compose your application with Vue components, each component’s dependencies are automatically tracked during its render, so the system knows precisely which component actually needs to be updated when there is a change in data. This makes all updates to the DOM use minimal resources, thereby improving the overall application efficiency.

Vue is also compatible with state managers like Flux, Redux, and Vuex which are excellent in managing data flow in complex applications. Vue’s utilization of a one-way data-binding model also makes state management easier in complex applications.

• One Page Application :

I would like to share a personal opinion – Single Page Applications are the greatest thing to happen to the internet in the last decade. It opens up applications to a wider audience of users than was possible before.

When you consider that many internet users outside of some parts of America and Europe have challenges getting on the internet, you begin to appreciate the role single page applications play in delivering a rich web experience to them.

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.

If you are familiar with JavaScript, you can build a non-trivial application with Vue after just one day of reading the documentation.

• Basic Vue usage with Laravel :

Vue integrates nicely with Laravel. You can create Vue components and use them like you would use regular HTML tags inside your blade file. You can pass props to the component from the output generated when your blade file renders.

• To try it out, create a new Laravel installation using the Laravel installer:

$ laravel new Vue app
If you do not have the Laravel installer, run the following command to get it:

$ composer global require "laravel/installer"
When this is done, change your working directory into your new Laravel installation:

$ cd Vue app
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
If you like seeing your changes as you make them, especially since you are learning, then you should definitely run
watch to watch the applications.
Now, open another terminal instance and start the Laravel application server:

$ PHP artisan serve
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.

You can create your Vue components in many ways. For this guide, we are going to create each component in a separate file in resources/assets/js/components directory to keep things neater. All Vue template files end in .vue extension, so name everyone you create correctly.

Now, create a new file Welcome.vue inside the components directory, and add the following to it:

Now, create a new file Welcome.vue inside the components directory, and add the following to it:

<template>         
<div class="flex-center position-ref full-height">             
<div class="content">                 
<div class="title m-b-md">                     
Welcome to Vue.js on Laravel                 
</div>                 
<div class="links">                     
<a href="https://laravel.com/docs">View Laravel Docs</a>                     
<a href="https://vuejs.org/v2/guide/">View Vue Docs</a>                    
<a href="https://laracasts.com">Watch Videos</a>              
</div>           
</div>         
</div> 

    
 </template>  
<script>      
export default {}    
</script>     

<style scoped>        
 html, body {          
   background-color: #fff;           
  color: #636b6f;           
  font-family: 'Raleway', sans-serif;       
      
font-weight: 100;    
   height: 100vh;        
   margin: 0; 
}      
   .full-height {      
    height: 100vh
}    
     .flex-center {             
align-items: center;        
     display: flex;             
justify-content: center;         
}     
    .position-ref {          
   position: relative;         
}        
 .top-right {          
   position: absolute;      
       right: 10px;          
   top: 18px;        
 }         
.content {            
 text-align: center;         
}   
      .title {           
  font-size: 84px;        
 }         
.links > a {             
color: #636b6f;             
padding: 0 25px;          
   font-size: 12px;            
 font-weight: 600;           
  letter-spacing: .1rem;            
 text-decoration: none;             
text-transform: uppercase;       
  }    
     .m-b-md {          
   margin-bottom: 30px;        
 }  
   </style>

<template> holds the HTML template for the page we are making. If we do not enclose our HTML in the template tag, we would have to specify what the template is, either by linking to an external file or by assigning the entire template content as a variable to Vue.

If we have an external file called MyTemplate.vue, we would need to grab more JavaScript libraries to help us parse and use the external template. This is enough reason not to use external templates.

If you look at the contents enclosed by the <template> tag, you would see that it is just plain HTML markup. The most important part is that this is a valid Vue template as well. You would not need to learn new tricks to get started.

We have the script section on the page where we define the entire logic that controls the page. We do not need to define or declare anything to use Vue templates, so we leave it empty. The last part is the style section. We added a parameter to it – scoped simply to tell Vue “Apply these styles to this component alone. Do not make it available to any other component”. This means that the changes we made to existing styles and the new styles we added will not be visible outside of this component.

• Using the component in your blade file :

We have made our first Vue component (I know, it is that easy). To use it in the welcome.blade.php file, we would need to make Vue aware that it exists and give it a name Vue would label it with.

Open the resources/assets/js/app.js file and edit it to the following:

require('./bootstrap'); window.Vue = require('vue'); Vue.component('welcome', require('./components/Welcome.vue')); const app = new Vue({ el: '#app' });
Next, use the Vue component inside of your resources/views/welcome.blade.php file:


 [...]            
<meta name="viewport" content="width=device-width, initial-scale=1">             
<meta name="csrf-token" content="{{ csrf_token() }}">             
<title>Laravel</title>    
 [...]        
 <body>           
  <div id="app">            
     <welcome></welcome>   
          </div>             
<script type="text/javascript" src="js/app.js"></script>       
  </body>    
 [...]

Make sure to edit the file accordingly and include the script tag in it so that your Vue component can be visible on the page

If you set your application to watch for changes to your js assets, then you should see that it already built the entire application and would output compiled
successfully in XXXms
.


Now, Visit onhttp://localhost:8000 your browser to see your application.

 

Related Posts

Web Applications

Connect Laravel Real Time Database with Firebase Application

  Synchronization of data is essential for the smooth running of any application or website. Data retrieval is a crucial part of any app development. There are many framework level tools and data retrieval systems Read more…

Web Applications

What’s New in WooCommerce 3.7 Updates and Features

In Aug 2019, WooCommerce released version 3.7 and presented more product blocks and higher requirements for the PHP and WordPress versions. We will discuss the most recent updates of woocommerce in this blog. WooCommerce 3.7 Read more…

Uncategorized

How Laravel Simplify Core PHP Issues Easily

  An open-source free PHP Development frameworks, Laravel has been making the lives of developers easy throughout the globe simpler and increasingly beneficial. Since its presentation in 2011 by Taylor Otwell, it has been lauded Read more…