willaengine/resources/js/Home/views/Home.vue

<template>
    <v-container fluid>
        <v-layout row wrap>
            <a
                :href="module.href"
                :class="'flex ' + module.main_class"
                v-for="( module ,key ) in modules"
                :key="key"
            >
                <wm-tile
                    :TileClass="module.title_class"
                    :TitleEn="module.title_en"
                    :TitleFa="module.title_fa"
                    :Desc="module.description"
                    :GradientBegin="module.gradient_begin"
                    :GradientEnd="module.gradient_end"
                    :ImageURL="module.img_url"
                    :ImageHeight="module.img_height"
                ></wm-tile>
            </a>
        </v-layout>
        <router-link :to="{name: 'AddModule'}">
            <v-btn large fab color="cyan" fixed bottom left dark style="left:5%">
                <v-icon dark>fas fa-plus</v-icon>
            </v-btn>
        </router-link>
    </v-container>
</template>



<script>
import Tile from "@Global/components/Tiles/Tile";
import { mapGetters, mapActions } from 'vuex';
export default {
    data: () => ({
        modules: [
            {
                href: "/CRM/Home",
                title_class: "Inline LTR Padd10",
                main_class: "lg8 xs12",
                title_en: "CRM",
                title_fa: " مدیریت ارتباط با مشتری ",
                description: " کالاها، خدمات، تخفیفات، فروش وِیژه و ... ",
                gradient_begin: "d6e7de",
                gradient_end: "fff2f3",
                img_url: "Members.png",
                img_height: "220px"
            },
            {
                href: "/Reservation/Home",
                title_class: "Padd10",
                main_class: "lg4 xs12",
                title_en: "Reservations",
                title_fa: " سیستم رزرو وقت ",
                description: " کالاها، خدمات، تخفیفات، فروش وِیژه و ... ",
                gradient_begin: "fff",
                gradient_end: "f7f7f7",
                img_url: "Clock.png",
                img_height: "150px"
            }
        ]
    }),
    components: {
        "wm-tile": Tile
    },
    computed: {
        ...mapGetters("role_permission", ["getModules"]),
    },
    methods:{
        ...mapActions('role_permission', ['loadModules']),
    },
    created() {
       this.loadModules(); 
    },
};
</script>

<style scoped lang="scss">
</style>