menu

Questions & Answers

How to enhance an existing Laravel project with VueJS?

I just finished my project using only the Laravel framework. Now I want to add vue.js into my project to render the views without loading them. I went through some tutorials and found that I need to convert my blade files into Vue components to achieve this. But as I know it's a big process as some of the functions won't work in VueJS. And I don't know how to do it. Please, someone, guide me here on how to do that. Thanks in advance.

Comments:
2023-01-11 09:29:32
I really don't see any short ways to completely convert your project in just a few days -- depends on the size of your project. However, you can convert some part of your blade files in Vue components and render them in .balde files. PS. you might have used jQuery in your blade files so this is something also you might not want to redo the same work using Vue.
2023-01-11 09:29:32
Thank you for your response. Please let me know what is the best way to do this? Using AngularJS or VueJS? And please suggest me a good tutorial to do this.
Answers(3) :

If you are planning to migrate the whole application then start with authentication.

Part #1: https://codebriefly.com/laravel-jwt-authentication-vue-ja-spa-part-1/

Part #2 https://codebriefly.com/laravel-jwt-authentication-vue-js-spa-part-2/

This tutorial helped me in the past to getting started. After that split your code into components.

If you want to learn basics first then you can go with this tutorial I found this useful. https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQcYgjhBoeQH7wiAyZNrYa

Hope this helps!

  1. Rebuild your basic structure into a Vue template:
// MyTemplate.vue
<template>
  <div> <!-- keep this single "parent" div in your template -->

    <!-- your Blade layout here -->

  </div>
</template>

<script>
  export default {
    props: [ 'data' ]
  }
</script>
  1. Add your Vue template as a global component in app.js:
// app.js
import Vue from 'vue';
window.Vue = Vue;

Vue.component('my-template', require('./MyTemplate.vue').default);

const app = new Vue({
  el: '#app'
});
  1. Use this new Vue template in your Blade template as below:
<my-template :data="{{ $onePhpVarThatHoldsAllYourData }}"></my-template>

Once inside the Vue template, you will not be able to reach back to your Laravel methods (e.g. @auth) or for additional data without an Ajax request, so make sure you package all the data you need in your Vue template up front. All of the data you send in will be prefixed inside the Vue template with the name of the prop you assign it to, in this case data.

Note, once you get more familiar with Vue you will likely start segregating the individual data values being passed to your template. For that, you will need to specify additional props in the props array in step 1, e.g.

    props: ['a', 'b', 'c'],

and then individually pass their values with

<my-template :a="{{ $a }}" :b="{{ $b }}" :c="{{ $c }}"></my-template>
  1. Convert your Blade directives to Vue directives:

Loops (e.g. @foreach) to v-fors:

@foreach ($items as $item)
  <li>{{ $item }}</li>
@endforeach

becomes

  <li v-for="item in data.items">{{ item }}</li>

Control structures (e.g. @if ($something !== $somethingElse) ... @endif) to v-ifs:

<div v-if="data.something !== data.somethingElse">
...
</div>
Comments:
2023-01-11 09:29:32
Thank you very much for this detailed answer, this is gonna help me a lot in my work.

In general, as it was already mentioned in comments, there's no short way for converting your application from blades to VueJS components. Anyway, if you consider migrating to VueJS, I'd recommend you to make a full migration instead of partially using Vue components.

The main idea of migration to VueJS is to transfer all logic that you did in blade templates (like foreach's, if's etc) to Vue components and fetch all data using AJAX requests (e.g. with help of axios or nativelly).

In this case, your controllers should return all data needed for page rendering and Vue components will take care of rest rendering logic.

Also, it's a good option to use vue-router to handle rounding and make your application behave as SPA. In this case, you should create one wildcard route in your application that will return only one blade template. Inside of this template you should insert root tag that will initiate VueJS. The rest will be on the VueJS side.

Comments:
2023-01-11 09:29:32
Thank you very much for your answer. Can you suggest me some good tutorial to do this?
2023-01-11 09:29:32
Also I want to know what is the best way to do this? Using AngularJS or VueJS?
2023-01-11 09:29:32
I think you may check these courses - laracasts.com/skills/vue. As for Angular.. I don't know it personally, but it seems to be a bit more difficult to learn, than VueJS, especially if you didn't know any frontend frameworks before. Anyway, it also depends on how complex your application is
2023-01-11 09:29:32
Thank you very much. Let me go through this tutorial and try with Vue.