2FAuth/resources/js_vue3/App.vue

<script setup>
    import { RouterView } from 'vue-router'
    const route = useRoute()
    const kickUserAfter = ref(null)
    const isProtectedRoute = ref(null)

    watch(
        () => route.name,
        () => {
            isProtectedRoute.value = protectedRoute(route)
        }
    )

    const kickInactiveUser = computed(() => kickUserAfter.value > 0 && isProtectedRoute.value)

    onBeforeMount(async () => {
        const { useUserStore } = await import('./stores/user.js')
        const { language } = useNavigatorLanguage()
        const user = useUserStore()

        kickUserAfter.value = parseInt(user.preferences.kickUserAfter)
        isProtectedRoute.value = protectedRoute(route)

        watch(
            () => user.preferences.kickUserAfter,
            () => {
                kickUserAfter.value = parseInt(user.preferences.kickUserAfter)
            }
        )

        watch(language, () => {
            user.applyLanguage()
        })
    })

    function protectedRoute(route) {
        let bool = false
        route.meta.middlewares?.forEach(func => {
            if (func instanceof Function && func.name == 'auth') {
                bool = true
                return
            }
        })
        return bool
    }

</script>

<template>
    <notifications id="vueNotification" role="alert" width="100%" position="top" :duration="4000" :speed="0" :max="1" classes="notification is-radiusless" />
    <main class="main-section">
        <RouterView />
    </main>
    <kicker v-if="kickInactiveUser" :kickAfter="kickUserAfter"></kicker>
</template>