Files
interview-demo-code/spa/src/App.vue
2025-08-03 09:39:51 +03:00

43 lines
1.1 KiB
Vue

<template>
<div class="app-container h-full">
<FullscreenViewport v-if="platform === 'ios' || platform === 'android'"/>
<router-view/>
<CartButton/>
</div>
</template>
<script setup>
import {onMounted, ref, watch} from "vue";
import {useWebAppViewport, useBackButton} from 'vue-tg';
import {useMiniApp, FullscreenViewport} from 'vue-tg';
import {useRoute, useRouter} from "vue-router";
import CartButton from "@/components/CartButton.vue";
const tg = useMiniApp();
const platform = ref();
platform.value = tg.platform;
const {disableVerticalSwipes} = useWebAppViewport();
disableVerticalSwipes();
const router = useRouter();
const route = useRoute();
watch(
() => route.name,
() => {
if (route.name === 'home') {
window.Telegram.WebApp.BackButton.hide();
window.Telegram.WebApp.BackButton.offClick();
} else {
window.Telegram.WebApp.BackButton.show();
window.Telegram.WebApp.BackButton.onClick(() => {
window.Telegram.WebApp.HapticFeedback.impactOccurred('light');
router.back();
});
}
},
{immediate: true}
);
</script>