Which right way to organization vue.js components and Laravel backend

Question

I have the following template of a main site page:

As you can see, there are several sliders on this page. I get that each slider will be a vue.js component. So, every component will make a request for getting JSON data from a server by Post method. In my IndexPageController I will have a lot of methods for this. Next, I need to have Resource for each slider. Is it the right way?

Answer 1

This is the way it is supposed to be. Component is a standalone entity where it doesn't bother other outside components. You can request from a component to gather all the resource you need. No other Vue.js component care about these resources. You can also create different action on a component and it won't reflect anything to other components. You can do whatever you like inside a component.

To solve complex structure you can create child component, and child component can contain another child component and so on.

You can put your server request logic in created hook or even mounted hook. As the request is always asynchronous you need to wait until your component gets all the data from the server. Until then use some loader on your element to visually display that something is loading. And when you get the data, you know what you have to do.

According to your picture, your whole slider will be a component. And each card in that slider will be a component too. Use v-for on your card component to generate multiple card dynamically. You can also have other component inside your card component too. This way you can simplify your logic. It will be much better if you use single file Vue component (.vue file).

Answer 2

Since you have more than one slider and all of them work in the same behavior instead of making multiple slider components for each section of your template so as in the picture you will end up with three slider components why not to create a single slider component and pass it the source that it should pull the data from as a props and then using Axios or VueResource to fetch data from that source check example below

//test.blade.php

<div id="app">
    <slider-component :source="{{$source}}"></slider-component>
</div>

//$source is a variable you compacted it (passed it) to blade view on render
//it could be the endpoint you want to fetch data from 
//for example if you want to pull hot-deals items it could be "/products/hot-deals"
//if you want it to be most viewed items then "/products/most-viewed" and so on
//for sure you have to register routes in your app that matches these end points

now lets take a look on how to fetch data from this source in our slider component

//slider component
<template>
    //your html goes here
</template>

<script>
    export default {
        props : ['source'], //this should be called source since in our blade we passed it as source
        data(){
            return {
                items : [],
            }
        },
        created(){
            axios.post(this.source , {
                 //your request body here
            })
            .then(res => {
                //handle the request and then assign items the res body
            })
            .catch(err => {
                //do something in case of error
            });
        }
    }
</script>

Now this way you have only a single slider component that is customizable and can fetch data from a custom source.

Here is how to handle from Laravel side first let's create endpoints either in routes/web.php or routes/api.php for simplicity I will do that in routes/web.php

//routes/web.php
Route::get('/products/hot-deals" , "ProductController@hotDeals");

And here is the product Controller

use App\Models\Product;

class ProductController extends Controller {

    public function hotDeals(){
        //query your product model to select the hot-deals items for example
        return Product::where('price' , '<=' , 100);
    }
}

Hope you found this helpful , good luck.