nuxt-telegram-mini-app 0.0.1 → 0.0.3

package/.github/dependabot.yml

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

package/README.md

@@ -7,6 +7,7 @@ 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)
 
 ## ✨ Features
 
@@ -31,7 +32,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 +162,10 @@ import {
   useBackButton, 
   useHapticFeedback,
   useInitData,
-  useThemeParams 
+  useThemeParams,
+  useViewport,
+  useHomeScreen,
+  useTelegramStorage
 } from '~/composables/telegram'
 
 const main = useMainButton()
@@ -167,6 +173,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 +197,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>
@@ -226,29 +246,46 @@ Nuxt Layers provide a way to extend and customize Nuxt applications by sharing c
 
 ### Using This Template as a Layer
 
-To use this Telegram Mini App template as a layer in another Nuxt project:
+To use this Telegram Mini App template as a layer in another Nuxt project, install it as an NPM package:
+
+1. **Install the NPM package**:
+   ```bash
+   npm install nuxt-telegram-mini-app
+   # or
+   yarn add nuxt-telegram-mini-app
+   # or
+   pnpm add nuxt-telegram-mini-app
+   ```
+
+2. **Configure your Nuxt project** to extend this layer:
+   ```ts
+   // nuxt.config.ts
+   export default defineNuxtConfig({
+     extends: [
+       'nuxt-telegram-mini-app'
+     ],
+     // Your custom config here
+   })
+   ```
 
-1. **Clone or reference the layer**:
+   Alternatively, if you prefer to use a local clone or git dependency:
    ```bash
-   # Option 1: Clone as a subdirectory
+   # Clone as a subdirectory
    git clone https://github.com/patricktobias86/nuxt-telegram-mini-app.git layers/telegram-app
 
-   # Option 2: Add as git dependency (recommended for teams)
-   # In your project's package.json:
+   # Or add as git dependency in package.json:
    # "dependencies": {
    #   "nuxt-telegram-mini-app": "github:patricktobias86/nuxt-telegram-mini-app"
    # }
    ```
 
-2. **Configure your Nuxt project** to extend this layer:
+   Then configure:
    ```ts
    // nuxt.config.ts
    export default defineNuxtConfig({
      extends: [
-       // Local path
-       './layers/telegram-app',
-       // Or npm package
-       // 'nuxt-telegram-mini-app'
+       './layers/telegram-app'
+       // or 'nuxt-telegram-mini-app' for git dependency
      ],
      // Your custom config here
    })
@@ -382,6 +419,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
@@ -403,6 +441,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>`
@@ -588,8 +646,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'
       }]
     }
   }
@@ -598,7 +655,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
 

package/app/assets/css/main.css

@@ -40,7 +40,7 @@ html, body {
   overscroll-behavior: contain;
 }
 
-.tg-bg { background-color: var(--tg-theme-secondary-bg-color); }
+.tg-bg { background-color: var(---tg-theme-bg-color); }
 .tg-secondary-bg { background-color: var(--tg-theme-secondary-bg-color); }
 .tg-section-bg { background-color: var(--tg-theme-section-bg-color); }
 .tg-link, a { color: var(--tg-theme-link-color); }

package/app/components/tg/Button.vue

@@ -1,16 +1,17 @@
 <template>
-  <component :is="tag" v-bind="bind" :class="classes" :disabled="disabled || loading" @click="onClick">
+  <div class="px-3">
+    <component :is="tag" v-bind="bind" :class="classes" :disabled="disabled || loading" @click="onClick">
     <Icon v-if="loading" name="i-heroicons-arrow-path-20-solid" class="h-5 w-5 animate-spin" />
     <Icon v-if="icon && iconPosition === 'left' && !loading" :name="icon" class="h-5 w-5" />
     <span>{{ title }}</span>
     <Icon v-if="icon && iconPosition === 'right' && !loading" :name="icon" class="h-5 w-5" />
   </component>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { shareURL } from '~/composables/telegram'
-import { useHapticFeedback } from '~/composables/telegram'
+import { shareURL, useHapticFeedback  } from '~/composables/telegram'
 
 const props = withDefaults(defineProps<{
   title: string

package/app/components/tg/Cell.vue

@@ -79,7 +79,7 @@ const bgClass = computed(() => props.tone === 'secondary' ? 'bg-secondaryBg' : '
 const showChevron = computed(() => props.chevron ?? isLink.value)
 
 const rootClass = computed(() => [
-  'w-full flex items-center gap-3 px-4 py-3',
+  'w-full flex items-center gap-3 p-4',
   bgClass.value,
   props.border ? 'border-b border-sectionSeparator last:border-b-0' : '',
   (isLink.value || props.clickable) ? 'hover:bg-secondaryBg transition-colors' : '',

package/app/components/tg/Content.vue

@@ -2,6 +2,7 @@
   <component :is="asTag" :class="rootClasses">
     <slot />
   </component>
+  <div class="h-2" />
 </template>
 
 <script setup lang="ts">