Footer.vue

<template>
    <footer class="tw-p-2 tw-bg-gray-800">
        <b-container>
            <b-row>
                <b-col>
                    aura/<b>dashboard</b> v{{ version }}
                    <span
                        v-for="mod in modules.footer"
                        :key="mod.slug"
                    >
                        | <router-link :to="mod.slug">
                            {{ mod.title }}
                        </router-link>
                    </span>

                    |
                    <router-link to="/credits">
                        Credits
                    </router-link>
                </b-col>
                <b-col align="right">
                    {{ $t('footer.tagline') }}
                </b-col>
            </b-row>
        </b-container>
    </footer>
</template>

<script>
    export default {
        props: {
            modules: {
                type: Object,
                required: true,
            }
        },
        computed: {
            version() {
                return import.meta.env.VUE_APP_VERSION
            }
        }
    }
</script>

<style scoped>
    footer {
        border-top: 1px solid #2e3436;
        color: rgba(255, 255, 255, 0.5);
        width: 100%;
        margin-top: auto;
    }
</style>