nuxt-telegram-mini-app 0.0.2 → 0.0.4

package/.github/dependabot.yml

@@ -0,0 +1,6 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"

package/.github/workflows/deploy-pages.yml

@@ -0,0 +1,63 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    env:
+      BOT_TOKEN: ${{ secrets.TELEGRAM_BOT_TOKEN }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm test
+
+      - name: Generate static site
+        run: npm run generate
+        env:
+          NUXT_APP_BASE_URL: /nuxt-telegram-mini-app/
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./.output/public
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package/README.md

@@ -7,6 +7,9 @@ A comprehensive template for building Telegram Mini Apps using Nuxt 4, Vue 3, Ty
 ![Vue](https://img.shields.io/badge/Vue-3.x-4FC08D)
 ![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178C6)
 ![Tailwind](https://img.shields.io/badge/Tailwind-3.x-38B2AC)
+![Telegram API](https://img.shields.io/badge/Telegram%20API-6.2-26A5E4)
+
+<img height="600" alt="Localhost" src="https://github.com/user-attachments/assets/2bbf6549-25db-42d5-b380-fc4f20884538" />
 
 ## ✨ Features
 
@@ -31,7 +34,9 @@ A comprehensive template for building Telegram Mini Apps using Nuxt 4, Vue 3, Ty
 - **⬅️ Back Button** - Navigation back button control
 - **👤 User Data** - Access to Telegram user information
 - **🎨 Theme Integration** - Automatic Telegram theme colors
-- **📐 Viewport Control** - Responsive viewport management
+- **📐 Viewport Control** - Fullscreen, safe-area, and responsive viewport management
+- **🏠 Home Screen Shortcuts** - Add/check Mini App shortcut support
+- **📍 Device APIs** - Feature-detected storage, location, and motion access
 - **🔗 Deep Linking** - External and Telegram link handling
 - **📤 Sharing** - Built-in sharing functionality
 
@@ -159,7 +164,10 @@ import {
   useBackButton, 
   useHapticFeedback,
   useInitData,
-  useThemeParams 
+  useThemeParams,
+  useViewport,
+  useHomeScreen,
+  useTelegramStorage
 } from '~/composables/telegram'
 
 const main = useMainButton()
@@ -167,6 +175,9 @@ const back = useBackButton()
 const haptic = useHapticFeedback()
 const init = useInitData()
 const theme = useThemeParams()
+const viewport = useViewport()
+const homeScreen = useHomeScreen()
+const storage = useTelegramStorage('device')
 
 // Configure main button
 onMounted(() => {
@@ -188,6 +199,17 @@ onMounted(() => {
 // Access user data
 const userName = computed(() => init.user.value?.first_name || 'Guest')
 
+// Newer Telegram APIs are feature-detected
+function openFullscreen() {
+  if (!viewport.fullscreen.value) {
+    viewport.requestFullscreen()
+  }
+}
+
+function rememberPreference() {
+  storage.setItem('preferred_mode', theme.dark.value ? 'dark' : 'light')
+}
+
 // Use theme colors
 const bgColor = computed(() => theme.backgroundColor.value)
 </script>
@@ -399,6 +421,7 @@ export default {
 - `setParams(params)` - Configure button
 - `onClick(callback)` - Handle clicks
 - `visible` - Visibility state
+- Supports shine effect, custom emoji icon, and other current BottomButton params
 
 #### `useBackButton()`
 - `show()` / `hide()` - Control visibility
@@ -420,6 +443,26 @@ export default {
 - `buttonColor` - Theme button color
 - And more theme colors...
 
+#### `useViewport()`
+- `requestFullscreen()` / `exitFullscreen()` - Toggle Telegram fullscreen when supported
+- `insets` - Device safe-area insets
+- `contentInsets` - Content safe-area insets
+
+#### `useMiniApp()`
+- `hideKeyboard()` - Hide the native keyboard when supported
+- `lockOrientation()` / `unlockOrientation()` - Control device orientation when supported
+- `enableVerticalSwipes()` / `disableVerticalSwipes()` - Control vertical swipe gestures
+
+#### New Telegram APIs
+- `useSecondaryButton()` - Control Telegram's secondary bottom button
+- `useSettingsButton()` - Control the Mini App settings menu button
+- `useHomeScreen()` - Add/check home screen shortcuts
+- `useEmojiStatus()` - Request emoji status access and open the set-status dialog
+- `useTelegramStorage(type)` - Use `cloud`, `device`, or `secure` Telegram storage
+- `useLocationManager()` - Initialize and request native location data
+- `useDeviceMotion()` - Access accelerometer, orientation, and gyroscope objects
+- `shareToStory()`, `shareMessage()`, `downloadFile()`, `requestChat()` - Wrappers for newer Telegram actions
+
 ### Components
 
 #### `<TgButton>`
@@ -605,8 +648,7 @@ export default defineNuxtConfig({
   app: {
     head: {
       script: [{
-        src: 'https://telegram.org/js/telegram-web-app.js?58',
-        defer: true
+        src: 'https://telegram.org/js/telegram-web-app.js?62'
       }]
     }
   }
@@ -615,7 +657,7 @@ export default defineNuxtConfig({
 
 ### Telegram WebApp Script
 
-The template automatically includes the Telegram WebApp script. The version can be updated in the Nuxt config.
+The template automatically includes the Telegram WebApp script. The wrapper feature-detects newer APIs because the available API version depends on the user's Telegram client.
 
 ## 🤝 Contributing