[Vuejs]-How to deploy an Laravel 5.4 API and Vue.js 2 project?

by

0👍

✅

You probably have already observed that Laravel comes pre configured to use Vue.js as its frontend, which you use to build components and then build or compile into your app.js using Webpack, Laravel-Mix, Babel etc.

The normal structure is your Laravel code, your api, lives in the app directory, and your Vue.js and style sheets are built in the resources/assets/ directory, then built out into your public html directory using npm run dev or npm run watch etc.

To connect your front end and backend, or communicate between the two, you would use some form of XMLHttpRequest, a.k.a Ajax.

Laravel has Axios installed by default for all your Ajax needs. This is where you want to start looking at making the api calls to your backend.

An Axios request from Vue looks something like this. (promise based)

axios.get('logout').then(//some function).catch(//some function);

Here is a simple api request being made to remote endpoint that returns a json response with {"message":"hello world"}

Vue.component('example', {
	template: '#cool',
  data(){
  	return{
    	 requestData: {"message":"waiting for request..."},
    }
  },
  methods: {
    makeRequest(){
      axios.get('https://api.myjson.com/bins/xpk6h').then(function(response) {
          console.log(response.data.message); 
          this.requestData = response.data;
       }.bind(this));
    }
  },
});

const app = new Vue({
  el: '#app'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<div id="app">
    <example></example>
</div>


<template id="cool" functional>
      <div>
          <button @click="makeRequest">make api request</button>
          <p>{{requestData.message}}</p>
      </div>
 </template>
👤skribe

Leave a comment