<div>Pedro el consumo del API por ejemplo voy a trabajar con VUE usando AXIOS como seria?  cuando pida la url en caso local se pone localhost:puerto/ruta_a_consumir, nunca he trabajado back y front separado, me podria explicar brevemente. gracias</div>

<div>Pedro el consumo del API por ejemplo voy a trabajar con VUE usando AXIOS como seria?&nbsp; cuando pida la url en caso local se pone localhost:puerto/ruta_a_consumir, nunca he trabajado back y front separado, me podria explicar brevemente. gracias</div>

<div>Simplemente tendrias que crear componentes para realizar las pruebas. Tu backend( Laravel) puede ir donde sea. Por estandar deberas usar las rutas api, que por prefijo llevan el segmento api, es decir , proyecto.test/api/tu-ruta. Tu front end lo puedes tener en el mismo proyecto o externamente. Este seria un ejemplo burdo de un componente de vuejs que funciona de esa manera: </div>

<pre>&lt;template&gt;
 &lt;div class="container-fluid"&gt;
 &lt;div class="row m-0 mt-4"&gt;
 &lt;div class="card col-6 offset-2 border-0 shadow-sm"&gt;
 &lt;input type="text" class="bg-transparent border-0 shadow-none" placeholder="userId" id="userId"&gt;
 &lt;/div&gt;
 &lt;div class="text-center"&gt;
 &lt;button class="btn btn-primary btn-md mx-2" type="button" @click="searchUser"&gt;
 Search
 &lt;/button&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;div class="code mt-4"&gt;
 &lt;div class="card col-3 mx-auto" v-if="user"&gt;
 &lt;div class="card-header"&gt;
 &lt;h4 class="display-5 text-primary"&gt;
 {{user.name}}
 &lt;span class="badge badge-danger"&gt;
 {{user.id}}
 &lt;/span&gt;
 &lt;/h4&gt;
 &lt;/div&gt;
 &lt;div class="card-body"&gt;
 &lt;li v-for="(items,index) in user" :key="index"&gt;
 {{index}}:{{items}}
 &lt;/li&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;div class="row" v-if="error"&gt;
 &lt;div class="alert alert-warning alert-dismissible fade show" role="alert"&gt;
 &lt;strong&gt;Holy guacamole!&lt;/strong&gt; You should check in on some of those fields below.
 &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;
 &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
 &lt;/button&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;

&lt;/template&gt;

&lt;script&gt;
 export default {
 mounted() {
 console.log('mounted');
 },
 data(){
 return{
 user:null,
 hasError:false
 }
 },
 methods:{
 searchUser:function(){
 let id=document.getElementById('userId').value;
 axios.get('<a href="https://jsonplaceholder.typicode.com/users" rel="nofollow noreferrer noopener" target="_blank">https://jsonplaceholder.typicode.com/users</a>',
 {params:{id:id}})
 .then(response=&gt;{
 this.user=response.data[0];
 console.log(this.user);
 })
 .catch(error=&gt;{
 this.error=true;
 });
 }
 },
 computed:{
 error:function(){
 return this.hasError;
 }
 }
 }

&lt;/script&gt;
&lt;style lang="scss" scoped&gt;
 .navbar-icon{
 font-size:20px;
 }
 input{
 border:none;
 outline:none !important;
 height:3em;
 box-shadow:none !important;
 background-color:transparent !important;
 }
 .code {
 position:relative;
 min-height:250px;
 font-family: monospace;
 width:80%;
 margin:0 auto;
 background:rgba(0,0,0,0.12 );
 }
&lt;/style&gt;
 </pre>

<div>Cabe resaltar que las rutas de laravel funcionan como api de manera predeterminada ,ya que devuelven un response. Para usarlas como api en tu controlador simplemente devuelve la respuesta de la siguiente manera:</div>

<pre>return response()-&gt;json(['id'=&gt;$user-&gt;id,'name'=&gt;$user-&gt;name],200);</pre>

<div>Este componente simplemente hace una peticion a jsonplaceholder basado en el id que tu le pasas( si se que le faltan validaciones). Te recomiendo que revises este curso, es bastante bueno y funciona como estas pidiendo:</div>

<pre><a href="https://aprendible.com/series/red-social-laravel-tdd" rel="nofollow noreferrer noopener" target="_blank">https://aprendible.com/series/red-social-laravel-tdd</a></pre>

<div>Simplemente tendrias que crear componentes para realizar las pruebas. Tu backend( Laravel) puede ir donde sea. Por estandar deberas usar las rutas api, que por prefijo llevan el segmento api, es decir , proyecto.test/api/tu-ruta. Tu front end lo puedes tener en el mismo proyecto o externamente. Este seria un ejemplo burdo de un componente de vuejs que funciona de esa manera: </div><pre>&lt;template&gt;
 &lt;div class="container-fluid"&gt;
 &lt;div class="row m-0 mt-4"&gt;
 &lt;div class="card col-6 offset-2 border-0 shadow-sm"&gt;
 &lt;input type="text" class="bg-transparent border-0 shadow-none" placeholder="userId" id="userId"&gt;
 &lt;/div&gt;
 &lt;div class="text-center"&gt;
 &lt;button class="btn btn-primary btn-md mx-2" type="button" @click="searchUser"&gt;
 Search
 &lt;/button&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;div class="code mt-4"&gt;
 &lt;div class="card col-3 mx-auto" v-if="user"&gt;
 &lt;div class="card-header"&gt;
 &lt;h4 class="display-5 text-primary"&gt;
 {{user.name}}
 &lt;span class="badge badge-danger"&gt;
 {{user.id}}
 &lt;/span&gt;
 &lt;/h4&gt;
 &lt;/div&gt;
 &lt;div class="card-body"&gt;
 &lt;li v-for="(items,index) in user" :key="index"&gt;
 {{index}}:{{items}}
 &lt;/li&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;div class="row" v-if="error"&gt;
 &lt;div class="alert alert-warning alert-dismissible fade show" role="alert"&gt;
 &lt;strong&gt;Holy guacamole!&lt;/strong&gt; You should check in on some of those fields below.
 &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;
 &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
 &lt;/button&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;

&lt;/template&gt;

&lt;script&gt;
 export default {
 mounted() {
 console.log('mounted');
 },
 data(){
 return{
 user:null,
 hasError:false
 }
 },
 methods:{
 searchUser:function(){
 let id=document.getElementById('userId').value;
 axios.get('<a href="https://jsonplaceholder.typicode.com/users">https://jsonplaceholder.typicode.com/users</a>',
 {params:{id:id}})
 .then(response=&gt;{
 this.user=response.data[0];
 console.log(this.user);
 })
 .catch(error=&gt;{
 this.error=true;
 });
 }
 },
 computed:{
 error:function(){
 return this.hasError;
 }
 }
 }

&lt;/script&gt;
&lt;style lang="scss" scoped&gt;
 .navbar-icon{
 font-size:20px;
 }
 input{
 border:none;
 outline:none !important;
 height:3em;
 box-shadow:none !important;
 background-color:transparent !important;
 }
 .code {
 position:relative;
 min-height:250px;
 font-family: monospace;
 width:80%;
 margin:0 auto;
 background:rgba(0,0,0,0.12 );
 }
&lt;/style&gt;
 </pre><div>Cabe resaltar que las rutas de laravel funcionan como api de manera predeterminada ,ya que devuelven un response. Para usarlas como api en tu controlador simplemente devuelve la respuesta de la siguiente manera:</div><pre>return response()-&gt;json(['id'=&gt;$user-&gt;id,'name'=&gt;$user-&gt;name],200);</pre><div>Este componente simplemente hace una peticion a jsonplaceholder basado en el id que tu le pasas( si se que le faltan validaciones). Te recomiendo que revises este curso, es bastante bueno y funciona como estas pidiendo:</div><pre> <a href="https://aprendible.com/series/red-social-laravel-tdd">https://aprendible.com/series/red-social-laravel-tdd</a> </pre>

<div>Gracias entendido, usted es muy amable. Pienso hacer una app con Quasar Framework y Laravel. Quiero separar el Back y el Front.</div>

<div>Gracias entendido, usted es muy amable. Pienso hacer una app con Quasar Framework y Laravel. Quiero separar el Back y el Front.</div>

<div>Tambien podrias usar Lumen, aunque te quita ciertas cosas de laravel. El lado de bueno de las API's es que puedes tener tu front end en un servidor y el back en otro. Por estandar se usan las rutas "api" para manejarlo de esta manera y las rutas "web" para devolver vistas,etc.  En tu RouteServiceProvider  puedes modificar el prefijo de las rutas api. Te recomiendo que investigues de Responsable Exceptions en Laravel y revises dicho service provider para poder customizar mejor tu aplicacion. Suerte con tu proyecto.</div>

<div>Tambien podrias usar Lumen, aunque te quita ciertas cosas de laravel. El lado de bueno de las API's es que puedes tener tu front end en un servidor y el back en otro. Por estandar se usan las rutas "api" para manejarlo de esta manera y las rutas "web" para devolver vistas,etc.&nbsp; En tu RouteServiceProvider&nbsp; puedes modificar el prefijo de las rutas api. Te recomiendo que investigues de Responsable Exceptions en Laravel y revises dicho service provider para poder customizar mejor tu aplicacion. Suerte con tu proyecto.</div>

<div>En mi humilde experiencia podrías crearte dos carpetas y darles le nombre "Frontend" y "Backend" respectivamente; en el frontend puedes utilizar la tecnología que sea de tu preferencia como por ejemplo: VueJS, si utiliza este puede emplear el CLI de VueJS para crearte todo la estructura del frontend. Por otro lado, el desarrollo del backend, lo puedes trabajar normalmente sólo que el consumo de los recursos puedes ponerlo a disposición del frontend por medios de API.  Todo esto dependerá mucho de la metodología y lógica de programación que selecciones.  Espero que esto pueda orientarte. Tengas un excelente día.</div>

<div>En mi humilde experiencia podrías crearte dos carpetas y darles le nombre "Frontend" y "Backend" respectivamente; en el frontend puedes utilizar la tecnología que sea de tu preferencia como por ejemplo: VueJS, si utiliza este puede emplear el CLI de VueJS para crearte todo la estructura del frontend. Por otro lado, el desarrollo del backend, lo puedes trabajar normalmente sólo que el consumo de los recursos puedes ponerlo a disposición del frontend por medios de API.&nbsp; Todo esto dependerá mucho de la metodología y lógica de programación que selecciones.&nbsp; Espero que esto pueda orientarte. Tengas un excelente día.</div>

Arturo Callisaya

<div>Como podria separar un proyecto laravel en backend y frontend....para que digamos el programador backend haga su trabajo, y luego el programador front consuma eso.....tendria que tener 2 proyectos? y que el front consuma con la api del backend? o como haria?</div>

<div>Como podria separar un proyecto laravel en backend y frontend....para que digamos el programador backend haga su trabajo, y luego el programador front consuma eso.....tendria que tener 2 proyectos? y que el front consuma con la api del backend? o como haria?</div>

Separar proyecto laravel en backend y frontend, y asignar a diferentes personas