adrema/resources/js/views/setting/Module.vue

<template>
    <page-layout>
        <template #right>
            <f-save-button form="modulesettingform"></f-save-button>
        </template>
        <setting-layout>
            <form id="modulesettingform" class="grow p-6 grid grid-cols-2 gap-3 items-start content-start" @submit.prevent="submit">
                <div class="col-span-full text-gray-100 mb-3">
                    <p class="text-sm">Hier kannst du Funktionen innerhalb von Adrema (Module) aktivieren oder deaktivieren und so den Funktionsumfang auf deine Bedürfnisse anpassen.</p>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <f-switch v-for="module in meta.modules" :id="module.id" v-model="data.modules" :value="module.id" size="sm" name="modules" :label="module.name"></f-switch>
                </div>
            </form>
        </setting-layout>
    </page-layout>
</template>

<script setup>
import {props, useSettings} from './useSettings.js';
const innerProps = defineProps(props);
const {submit, data, meta, SettingLayout} = useSettings(innerProps);
</script>