nuxt-telegram-mini-app 0.0.1

package/app/components/tg/Section.vue

@@ -0,0 +1,50 @@
+<template>
+  <section :class="sectionClass">
+    <header v-if="title" :class="inset ? 'px-4' : 'last:pb-0'">
+      <h2 class="px-3 text-sm uppercase mb-1.5" :style="{ color: 'var(--tg-theme-section-header-text-color)' }">{{ title }}</h2>
+    </header>
+    <div class="bg-bg" :class="bodyClass" :style="{ backgroundColor: 'var(--tg-theme-section-bg-color)' }">
+      <slot />
+    </div>
+    <footer v-if="$slots.append" class="pt-2 px-5 text-xs text-hint" :class="appendBorder ? 'border-t border-sectionSeparator' : ''">
+      <slot name="append" />
+    </footer>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  title?: string
+  /** Adds outer rounding/indents reminiscent of iOS */
+  inset?: boolean
+  /** Adds a thin top border above the append slot */
+  appendBorder?: boolean
+  /** Inner background tone */
+  tone?: 'default' | 'secondary'
+  /** Inner padding of the body (removed: default only) */
+  class?: string
+}>(), {
+  title: undefined,
+  inset: false,
+  appendBorder: true,
+  tone: 'default',
+  class: '',
+})
+
+const sectionClass = computed(() => [props.inset ? 'px-3' : '', props.class].filter(Boolean).join(' '))
+
+const roundedClass = computed(() => props.inset ? 'rounded-2xl overflow-hidden' : 'rounded')
+
+const paddingClass = computed(() => '')
+
+const toneClass = computed(() => props.tone === 'secondary' ? 'bg-secondaryBg' : 'bg-bg')
+
+const borderClass = computed(() => '')
+
+const bodyClass = computed(() => [roundedClass.value, borderClass.value, toneClass.value, paddingClass.value].filter(Boolean).join(' '))
+</script>
+
+<style scoped>
+</style>

package/app/composables/telegram.ts

@@ -0,0 +1,342 @@
+import { ref, computed, onMounted } from 'vue'
+import type {
+  TelegramWebApp,
+  TelegramWebAppInitData
+} from '~/types/telegram-webapp'
+
+// Helper to get WebApp instance
+function getWebApp(): TelegramWebApp | null {
+  if (typeof window === 'undefined') return null
+  return window.Telegram?.WebApp || null
+}
+
+// Shared WebApp instance
+let globalWebApp: TelegramWebApp | null = null
+let isInitialized = false
+
+// Initialize WebApp once
+function initWebApp() {
+  if (isInitialized) return
+  if (typeof window === 'undefined') return
+  
+  globalWebApp = getWebApp()
+  if (globalWebApp) {
+    globalWebApp.ready()
+    isInitialized = true
+  }
+}
+
+// Main composable to access Telegram WebApp
+export function useTelegramWebApp() {
+  const webApp = ref<TelegramWebApp | null>(null)
+  const isReady = ref(false)
+
+  onMounted(() => {
+    initWebApp()
+    webApp.value = globalWebApp
+    isReady.value = isInitialized
+  })
+
+  return {
+    webApp: computed(() => webApp.value),
+    isReady: computed(() => isReady.value),
+    isAvailable: computed(() => !!webApp.value)
+  }
+}
+
+// Back Button
+export function useBackButton() {
+  const visible = ref(false)
+
+  onMounted(() => {
+    initWebApp()
+    if (globalWebApp?.BackButton) {
+      visible.value = globalWebApp.BackButton.isVisible
+    }
+  })
+
+  return {
+    supported: computed(() => !!globalWebApp?.BackButton),
+    mounted: computed(() => !!globalWebApp?.BackButton),
+    visible: computed(() => visible.value),
+    mount: () => true, // Always available with official SDK
+    unmount: () => true,
+    show: () => {
+      if (globalWebApp?.BackButton) {
+        globalWebApp.BackButton.show()
+        visible.value = true
+      }
+    },
+    hide: () => {
+      if (globalWebApp?.BackButton) {
+        globalWebApp.BackButton.hide()
+        visible.value = false
+      }
+    },
+    onClick: (fn: () => void) => {
+      if (globalWebApp?.BackButton) {
+        globalWebApp.BackButton.onClick(fn)
+        return fn
+      }
+      return () => {}
+    },
+    offClick: (fn: () => void) => {
+      if (globalWebApp?.BackButton) {
+        globalWebApp.BackButton.offClick(fn)
+      }
+    }
+  }
+}
+
+// Haptic Feedback
+export function useHapticFeedback() {
+  onMounted(() => {
+    initWebApp()
+  })
+
+  return {
+    supported: computed(() => !!globalWebApp?.HapticFeedback),
+    impactOccurred: (style: 'light' | 'medium' | 'heavy' = 'medium') => {
+      if (globalWebApp?.HapticFeedback) {
+        globalWebApp.HapticFeedback.impactOccurred(style)
+      }
+    },
+    notificationOccurred: (type: 'error' | 'success' | 'warning') => {
+      if (globalWebApp?.HapticFeedback) {
+        globalWebApp.HapticFeedback.notificationOccurred(type)
+      }
+    },
+    selectionChanged: () => {
+      if (globalWebApp?.HapticFeedback) {
+        globalWebApp.HapticFeedback.selectionChanged()
+      }
+    }
+  }
+}
+
+// Init Data
+export function useInitData() {
+  onMounted(() => {
+    initWebApp()
+  })
+
+  const state = computed<TelegramWebAppInitData | undefined>(() => 
+    globalWebApp?.initDataUnsafe || undefined
+  )
+  
+  const raw = computed<string | undefined>(() => 
+    globalWebApp?.initData || undefined
+  )
+
+  return {
+    state,
+    raw,
+    user: computed(() => state.value?.user),
+    receiver: computed(() => state.value?.receiver),
+    chat: computed(() => state.value?.chat),
+    authDate: computed(() => state.value?.auth_date),
+    queryId: computed(() => state.value?.query_id),
+    startParam: computed(() => state.value?.start_param),
+    restore: () => {
+      // Official SDK handles this automatically
+      return true
+    }
+  }
+}
+
+// Main Button
+export function useMainButton() {
+  onMounted(() => {
+    initWebApp()
+  })
+
+  return {
+    mounted: computed(() => !!globalWebApp?.MainButton),
+    enabled: computed(() => globalWebApp?.MainButton?.isActive || false),
+    loaderVisible: computed(() => globalWebApp?.MainButton?.isProgressVisible || false),
+    visible: computed(() => globalWebApp?.MainButton?.isVisible || false),
+    state: computed(() => ({
+      text: globalWebApp?.MainButton?.text || '',
+      color: globalWebApp?.MainButton?.color || '',
+      text_color: globalWebApp?.MainButton?.textColor || '',
+      is_active: globalWebApp?.MainButton?.isActive || false,
+      is_visible: globalWebApp?.MainButton?.isVisible || false
+    })),
+    text: computed(() => globalWebApp?.MainButton?.text || ''),
+    textColor: computed(() => globalWebApp?.MainButton?.textColor),
+    backgroundColor: computed(() => globalWebApp?.MainButton?.color),
+    mount: () => true, // Always available
+    unmount: () => true,
+    onClick: (fn: () => void) => {
+      if (globalWebApp?.MainButton) {
+        globalWebApp.MainButton.onClick(fn)
+        return fn
+      }
+      return () => {}
+    },
+    offClick: (fn: () => void) => {
+      if (globalWebApp?.MainButton) {
+        globalWebApp.MainButton.offClick(fn)
+      }
+    },
+    setParams: (updates: {
+      text?: string
+      color?: string
+      text_color?: string
+      is_active?: boolean
+      is_visible?: boolean
+    }) => {
+      if (globalWebApp?.MainButton) {
+        globalWebApp.MainButton.setParams(updates)
+      }
+    }
+  }
+}
+
+// Mini App / Theme management
+export function useMiniApp() {
+  onMounted(() => {
+    initWebApp()
+  })
+
+  return {
+    supported: computed(() => !!globalWebApp),
+    mounted: computed(() => !!globalWebApp),
+    active: computed(() => true), // Always active when available
+    dark: computed(() => globalWebApp?.colorScheme === 'dark'),
+    state: computed(() => globalWebApp || null),
+    backgroundColor: computed(() => globalWebApp?.backgroundColor),
+    headerColor: computed(() => globalWebApp?.headerColor),
+    bottomBarColor: computed(() => globalWebApp?.bottomBarColor),
+    setBackgroundColor: (color: string) => {
+      if (globalWebApp) {
+        globalWebApp.setBackgroundColor(color)
+      }
+    },
+    setHeaderColor: (color: string) => {
+      if (globalWebApp) {
+        globalWebApp.setHeaderColor(color)
+      }
+    },
+    setBottomBarColor: (color: string) => {
+      if (globalWebApp) {
+        globalWebApp.setBottomBarColor(color)
+      }
+    }
+  }
+}
+
+// Theme Params
+export function useThemeParams() {
+  onMounted(() => {
+    initWebApp()
+  })
+  
+  const themeParams = computed(() => globalWebApp?.themeParams || {})
+
+  return {
+    mounted: computed(() => !!globalWebApp),
+    dark: computed(() => globalWebApp?.colorScheme === 'dark'),
+    state: computed(() => themeParams.value),
+    backgroundColor: computed(() => themeParams.value.bg_color),
+    textColor: computed(() => themeParams.value.text_color),
+    accentTextColor: computed(() => themeParams.value.accent_text_color),
+    hintColor: computed(() => themeParams.value.hint_color),
+    buttonColor: computed(() => themeParams.value.button_color),
+    buttonTextColor: computed(() => themeParams.value.button_text_color),
+    destructiveTextColor: computed(() => themeParams.value.destructive_text_color),
+    linkColor: computed(() => themeParams.value.link_color),
+    secondaryBackgroundColor: computed(() => themeParams.value.secondary_bg_color),
+    sectionBackgroundColor: computed(() => themeParams.value.section_bg_color),
+    headerBackgroundColor: computed(() => themeParams.value.header_bg_color),
+    subtitleTextColor: computed(() => themeParams.value.subtitle_text_color),
+    sectionHeaderTextColor: computed(() => themeParams.value.section_header_text_color),
+    sectionSeparatorColor: computed(() => themeParams.value.section_separator_color)
+  }
+}
+
+// Viewport
+export function useViewport() {
+  onMounted(() => {
+    initWebApp()
+  })
+
+  return {
+    mounted: computed(() => !!globalWebApp),
+    width: computed(() => {
+      // Telegram WebApp doesn't expose viewport width directly, use window.innerWidth
+      return typeof window !== 'undefined' ? window.innerWidth : 0
+    }),
+    height: computed(() => globalWebApp?.viewportHeight || 0),
+    stableHeight: computed(() => globalWebApp?.viewportStableHeight || 0),
+    expanded: computed(() => globalWebApp?.isExpanded || false),
+    stable: computed(() => {
+      // Consider stable if viewport height equals stable height
+      const vh = globalWebApp?.viewportHeight || 0
+      const svh = globalWebApp?.viewportStableHeight || 0
+      return vh === svh
+    }),
+    insets: computed(() => ({
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    })),
+    requestFullscreen: () => {
+      // Not available in Telegram WebApp
+    },
+    exitFullscreen: () => {
+      // Not available in Telegram WebApp
+    },
+    expand: () => {
+      if (globalWebApp) {
+        globalWebApp.expand()
+      }
+    }
+  }
+}
+
+// Links and sharing
+export function openLink(url: string, options?: { try_instant_view?: boolean }) {
+  const webApp = getWebApp()
+  if (webApp) {
+    webApp.openLink(url, options)
+  } else {
+    // Fallback to regular window.open
+    window.open(url, '_blank')
+  }
+}
+
+export function openTelegramLink(url: string) {
+  const webApp = getWebApp()
+  if (webApp) {
+    webApp.openTelegramLink(url)
+  } else {
+    // Fallback to regular window.open
+    window.open(url, '_blank')
+  }
+}
+
+export function shareURL(url: string) {
+  const webApp = getWebApp()
+  if (webApp) {
+    // Use Web Share API if available, otherwise copy to clipboard
+    if (navigator.share) {
+      navigator.share({ url }).catch(() => {
+        // Fallback to clipboard if share fails
+        if (navigator.clipboard) {
+          navigator.clipboard.writeText(url)
+        }
+      })
+    } else if (navigator.clipboard) {
+      navigator.clipboard.writeText(url)
+    }
+  } else {
+    // Fallback to navigator.share or clipboard
+    if (navigator.share) {
+      navigator.share({ url })
+    } else if (navigator.clipboard) {
+      navigator.clipboard.writeText(url)
+    }
+  }
+}

package/app/error.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="min-h-screen tg-bg flex items-center justify-center p-4">
+    <div class="max-w-md w-full text-center space-y-6">
+      <div class="space-y-2">
+        <h1 class="text-2xl font-bold text-tg-text">
+          {{ error?.statusCode === 404 ? 'Page Not Found' : 'Something went wrong' }}
+        </h1>
+        <p class="text-tg-hint">
+          {{ error?.statusCode === 404 
+            ? 'The page you\'re looking for doesn\'t exist.' 
+            : 'We encountered an unexpected error. Please try again.' 
+          }}
+        </p>
+      </div>
+
+      <div class="space-y-3">
+        <button 
+          @click="handleError"
+          class="w-full bg-tg-button text-tg-button-text py-3 px-4 rounded-lg font-medium hover:opacity-90 transition-opacity"
+        >
+          {{ error?.statusCode === 404 ? 'Go Home' : 'Try Again' }}
+        </button>
+        
+        <button 
+          @click="clearAndReload"
+          class="w-full border border-tg-button text-tg-button py-3 px-4 rounded-lg font-medium hover:bg-tg-button hover:text-tg-button-text transition-colors"
+        >
+          Clear Cache & Reload
+        </button>
+      </div>
+
+      <details class="text-left text-sm text-tg-hint">
+        <summary class="cursor-pointer hover:text-tg-text">Technical Details</summary>
+        <div class="mt-2 p-3 bg-tg-secondary-bg rounded border text-xs font-mono">
+          <div><strong>Status:</strong> {{ error?.statusCode || 'Unknown' }}</div>
+          <div><strong>Message:</strong> {{ error?.statusMessage || 'No details available' }}</div>
+          <div><strong>URL:</strong> {{ error?.url || 'Unknown' }}</div>
+          <div v-if="telegramInfo"><strong>Telegram:</strong> {{ telegramInfo }}</div>
+        </div>
+      </details>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+// Define props for the error
+const props = defineProps<{
+  error: {
+    statusCode?: number
+    statusMessage?: string
+    message?: string
+    url?: string
+  }
+}>()
+
+// Get Telegram context info for debugging
+const telegramInfo = computed(() => {
+  if (typeof window === 'undefined') return null
+  
+  const info: string[] = []
+  
+  // Check if running in Telegram
+  const tg = (window as any)?.Telegram?.WebApp
+  if (tg) {
+    info.push('In Telegram WebApp')
+    info.push(`Platform: ${tg.platform || 'unknown'}`)
+    info.push(`Version: ${tg.version || 'unknown'}`)
+  }
+  
+  // Check for hash parameters
+  const hash = window.location.hash
+  if (hash && hash.includes('tgWebApp')) {
+    info.push('Has TG hash params')
+  }
+  
+  // Check for session storage flags
+  if (sessionStorage.getItem('__tg_hash_fixed')) {
+    info.push('Hash was fixed')
+  }
+  
+  return info.length > 0 ? info.join(', ') : 'Not in Telegram'
+})
+
+function handleError() {
+  if (props.error?.statusCode === 404) {
+    // Navigate to home
+    navigateTo('/')
+  } else {
+    // Try to reload the current page
+    if (typeof window !== 'undefined') {
+      window.location.reload()
+    }
+  }
+}
+
+function clearAndReload() {
+  if (typeof window !== 'undefined') {
+    // Clear all storage
+    try {
+      sessionStorage.clear()
+      localStorage.clear()
+    } catch (e) {
+      console.warn('Failed to clear storage:', e)
+    }
+    
+    // Clear hash fix flag specifically
+    try {
+      sessionStorage.removeItem('__tg_hash_fixed')
+    } catch (e) {
+      console.warn('Failed to clear hash fix flag:', e)
+    }
+    
+    // Reload without hash if there are problematic parameters
+    const hash = window.location.hash
+    if (hash && hash.includes('tgWebApp')) {
+      // Try to reload without the problematic hash
+      window.location.href = window.location.pathname + window.location.search
+    } else {
+      window.location.reload()
+    }
+  }
+}
+
+// Set page title
+useHead({
+  title: computed(() => 
+    props.error?.statusCode === 404 
+      ? 'Page Not Found' 
+      : 'Error - Telegram Mini App'
+  )
+})
+</script>
+
+<style scoped>
+/* Use Telegram theme colors */
+.tg-bg {
+  background-color: var(--tg-theme-bg-color, #ffffff);
+}
+
+.tg-text {
+  color: var(--tg-theme-text-color, #000000);
+}
+
+.tg-hint {
+  color: var(--tg-theme-hint-color, #999999);
+}
+
+.tg-button {
+  background-color: var(--tg-theme-button-color, #2481cc);
+}
+
+.tg-button-text {
+  color: var(--tg-theme-button-text-color, #ffffff);
+}
+
+.tg-secondary-bg {
+  background-color: var(--tg-theme-secondary-bg-color, #f1f1f1);
+}
+</style>