### Start and Track Accelerometer Data with useAccelerometer

Source: https://context7.com/deptyped/vue-telegram/llms.txt

Use this composable to start, stop, and reactively read accelerometer data. It requires Bot API 8.0+ and provides callbacks for data changes and errors. The example demonstrates starting tracking, logging data, and stopping after a delay.

```vue
<script lang="ts" setup>
import { useAccelerometer } from 'vue-tg'

const accelerometer = useAccelerometer()

async function startTracking() {
  await accelerometer.start({ refresh_rate: 100 }) // 100ms interval

  accelerometer.onChange(() => {
    console.log(`x=${accelerometer.x.value} y=${accelerometer.y.value} z=${accelerometer.z.value}`)
  })

  accelerometer.onFail((error) => {
    console.error('Accelerometer error:', error)
  })

  // Stop after 5 seconds
  setTimeout(async () => {
    await accelerometer.stop()
  }, 5000)
}
</script>

<template>
  <div>
    <p>X: {{ accelerometer.x }}</p>
    <p>Y: {{ accelerometer.y }}</p>
    <p>Z: {{ accelerometer.z }}</p>
    <button @click="startTracking">Start</button>
  </div>
</template>
```

--------------------------------

### Import and Initialize useAccelerometer

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables/use-accelerometer.md

Import the useAccelerometer composable from 'vue-tg' and initialize it to access accelerometer functionalities. This is the basic setup required to use the composable.

```typescript
import { useAccelerometer } from 'vue-tg'

const accelerometer = useAccelerometer()
```

--------------------------------

### Manage Home Screen Shortcut with useHomeScreen

Source: https://context7.com/deptyped/vue-telegram/llms.txt

This composable helps add the Mini App to the user's home screen and check its status. It requires Bot API 8.0+. The example shows how to check the current status, prompt the user to add the shortcut if not already added, and listen for the shortcut addition event.

```vue
<script lang="ts" setup>
import { useHomeScreen } from 'vue-tg'

const homeScreen = useHomeScreen()

async function promptAddToHomeScreen() {
  const status = await homeScreen.checkShortcutStatus()
  // status: 'added' | 'missed' | 'unknown'
  console.log('Shortcut status:', status)

  if (status !== 'added') {
    homeScreen.addShortcut()

    homeScreen.onShortcutAdd(() => {
      console.log('Shortcut successfully added!')
    })
  }
}
</script>
```

--------------------------------

### Install vue-tg Package

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/installation.md

Install the vue-tg package using npm. This is the first step for both standard Vue and Nuxt 3 projects.

```bash
npm i vue-tg
```

--------------------------------

### Basic Vue Component with MainButton

Source: https://github.com/deptyped/vue-telegram/blob/main/README.md

Example of using the MainButton component and the usePopup composable to display an alert. Ensure 'vue-tg' is installed and imported correctly.

```vue
<template>
  <MainButton text="Open alert" @click="() => popup.showAlert('Hello!')" />
</template>

<script lang="ts" setup>
import { MainButton } from 'vue-tg'
import { usePopup } from 'vue-tg/latest'

const popup = usePopup()
</script>
```

--------------------------------

### Track Device Orientation with useDeviceOrientation

Source: https://context7.com/deptyped/vue-telegram/llms.txt

This composable allows you to start, stop, and reactively read device orientation angles (alpha, beta, gamma). It requires Bot API 8.0+ and can be configured with a refresh rate and absolute orientation. The example shows how to start tracking and log orientation changes.

```vue
<script lang="ts" setup>
import { useDeviceOrientation } from 'vue-tg'

const orientation = useDeviceOrientation()

async function trackOrientation() {
  await orientation.start({ refresh_rate: 50, need_absolute: true })

  orientation.onChange(() => {
    console.log(
      `alpha=${orientation.alpha.value}° beta=${orientation.beta.value}° gamma=${orientation.gamma.value}°`,
    )
  })
}
</script>
```

--------------------------------

### Initialization

Source: https://github.com/deptyped/vue-telegram/blob/main/README.md

Method to signal that the Mini App is ready.

```APIDOC
## ready

### Description
Signals to the Telegram client that the Mini App is ready and fully loaded.

### Method
Not specified (likely a function call within a Vue component).

### Endpoint
N/A

### Request Example
```javascript
// Example usage with useMiniApp
ready();
```
```

--------------------------------

### LoginWidget Component

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/widgets/login-widget.md

This snippet shows how to use the LoginWidget component in a Vue application. It includes basic setup and an example of handling the authentication event.

```APIDOC
## LoginWidget Component

### Description
A Vue component that integrates with Telegram's Login Widget to authorize users on your website.

### Usage
```vue
<script lang="ts" setup>
import { LoginWidget } from 'vue-tg'
import type { LoginWidgetUser } from 'vue-tg'

function handleUserAuth(user: LoginWidgetUser) {
  // Handle user authentication logic here
  console.log('User authenticated:', user)
}
</script>

<template>
  <LoginWidget 
    bot-username="samplebot"
    @auth="handleUserAuth"
  />
</template>
```

### Props

#### `bot-username` (string) - Required
Username of the bot. This is a mandatory prop for the widget to function.

#### `redirect-url` (string) - Optional
URL to redirect to after authentication. If provided, the `auth` event will not be emitted.

#### `size` (string) - Optional
Size of the widget. Possible values are "large", "medium", "small". Defaults to "large".

#### `corner-radius` (number) - Optional
Corner radius of the button in pixels.

#### `user-photo` (boolean) - Optional
If true, displays the user's profile photo next to their name.

#### `request-write` (boolean) - Optional
If true, requests permission from the user to send messages from the bot.

#### `tag` (string) - Optional
Specify a custom HTML tag to wrap the widget. Defaults to "div".

### Events

#### `auth`
Emits when the user is successfully authorized. This event will not emit if a `redirect-url` is specified.

- **Type**: `(user: LoginWidgetUser) => void`
- **Payload**: An object containing user information (`LoginWidgetUser`).
```

--------------------------------

### Import and Initialize useQrScanner

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables/use-qr-scanner.md

Import the useQrScanner composable from vue-tg and initialize it. This sets up the necessary functions to interact with the QR scanner.

```typescript
import { useQrScanner } from 'vue-tg'

const qrScanner = useQrScanner()
```

--------------------------------

### File and Keyboard Handling

Source: https://github.com/deptyped/vue-telegram/blob/main/README.md

Methods for downloading files and hiding the keyboard using the useMiniApp hook.

```APIDOC
## downloadFile

### Description
Initiates the download of a file.

### Method
Not specified (likely a function call within a Vue component).

### Endpoint
N/A

### Parameters
- **url** (string) - Required - The URL of the file to download.

### Request Example
```javascript
// Example usage with useMiniApp
downloadFile('https://example.com/document.pdf');
```

## hideKeyboard

### Description
Hides the on-screen keyboard.

### Method
Not specified (likely a function call within a Vue component).

### Endpoint
N/A

### Request Example
```javascript
// Example usage with useMiniApp
hideKeyboard();
```
```

--------------------------------

### Track Gyroscope Rotation Rates with useGyroscope

Source: https://context7.com/deptyped/vue-telegram/llms.txt

Use this composable to start, stop, and reactively read gyroscope rotation rates (x, y, z). It requires Bot API 8.0+ and accepts a refresh rate. The example includes logging rotation data and handling potential errors.

```vue
<script lang="ts" setup>
import { useGyroscope } from 'vue-tg'

const gyroscope = useGyroscope()

async function trackRotation() {
  await gyroscope.start({ refresh_rate: 100 })

  gyroscope.onChange(() => {
    console.log(`x=${gyroscope.x.value} y=${gyroscope.y.value} z=${gyroscope.z.value}`)
  })

  gyroscope.onFail((error) => {
    console.error('Gyroscope error:', error)
  })
}
</script>
```

--------------------------------

### Import and Initialize useDeviceStorage

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables/use-device-storage.md

Import the useDeviceStorage composable from vue-tg and initialize it to access device storage methods.

```typescript
import { useDeviceStorage } from 'vue-tg'

const deviceStorage = useDeviceStorage()
```

--------------------------------

### useHomeScreen

Source: https://context7.com/deptyped/vue-telegram/llms.txt

Composable to add the Mini App as a shortcut to the user's home screen and check shortcut status. Requires Bot API 8.0+.

```APIDOC
## useHomeScreen

Composable to add the Mini App as a shortcut to the user's home screen and check shortcut status (Bot API 8.0+).

### Methods

- `checkShortcutStatus()`: Checks the current status of the home screen shortcut. Returns 'added', 'missed', or 'unknown'.
- `addShortcut()`: Prompts the user to add the Mini App to their home screen.
- `onShortcutAdd(callback: () => void)`: Registers a callback that is invoked when the shortcut is successfully added.

### Example

```vue
<script lang="ts" setup>
import { useHomeScreen } from 'vue-tg'

const homeScreen = useHomeScreen()

async function promptAddToHomeScreen() {
  const status = await homeScreen.checkShortcutStatus()
  console.log('Shortcut status:', status)

  if (status !== 'added') {
    homeScreen.addShortcut()

    homeScreen.onShortcutAdd(() => {
      console.log('Shortcut successfully added!')
    })
  }
}
</script>
```
```

--------------------------------

### Basic Discussion Widget Integration

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/widgets/discussion-widget.md

Embed the Discussion Widget by providing the URL of the discussion. This is the most basic setup.

```vue
<script lang="ts" setup>
import { DiscussionWidget } from 'vue-tg'
</script>

<template>
  <DiscussionWidget url="contest/198" />
</template>
```

--------------------------------

### Gyroscope Events

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps.md

Handles events related to gyroscope sensor data, including start, stop, change, and failure.

```APIDOC
## onGyroscopeStarted

### Description
Callback for when the gyroscope sensor starts successfully.

### Method
`onGyroscopeStarted`

### Related Hook
`useGyroscope`
```

```APIDOC
## onGyroscopeStopped

### Description
Callback for when the gyroscope sensor stops.

### Method
`onGyroscopeStopped`

### Related Hook
`useGyroscope`
```

```APIDOC
## onGyroscopeChanged

### Description
Callback for when the gyroscope sensor data changes.

### Method
`onGyroscopeChanged`

### Related Hook
`useGyroscope`
```

```APIDOC
## onGyroscopeFailed

### Description
Callback for when the gyroscope sensor fails to start or operate.

### Method
`onGyroscopeFailed`

### Related Hook
`useGyroscope`
```

--------------------------------

### addShortcut

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables/use-home-screen.md

Adds a shortcut to the Telegram home screen. This method is available starting from Bot API version 8.0.

```APIDOC
## addShortcut

### Description
Adds a shortcut to the Telegram home screen.

### Method
This is a method provided by the `useHomeScreen` composable.

### Parameters
Refer to the Web App API documentation for `WebApp-addToHomeScreen` for detailed parameter information.

### Response
Refer to the Web App API documentation for `WebApp-addToHomeScreen` for detailed response information.
```

--------------------------------

### Initialize useCloudStorage

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables/use-cloud-storage.md

Import and initialize the useCloudStorage composable to access cloud storage functionalities. This is the first step before performing any storage operations.

```typescript
import { useCloudStorage } from 'vue-tg'

const cloudStorage = useCloudStorage()
```

--------------------------------

### checkShortcutStatus

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables/use-home-screen.md

Asynchronously checks the status of a shortcut on the Telegram home screen. This method is available starting from Bot API version 8.0.

```APIDOC
## checkShortcutStatus

### Description
Asynchronously checks the status of a shortcut on the Telegram home screen.

### Method
This is an asynchronous method provided by the `useHomeScreen` composable.

### Parameters
Refer to the Web App API documentation for `WebApp-checkHomeScreenStatus` for detailed parameter information.

### Response
Refer to the Web App API documentation for `WebApp-checkHomeScreenStatus` for detailed response information.
```

--------------------------------

### useWebAppQrScanner

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables-legacy/use-web-app-qr-scanner.md

This composable is deprecated. Please use `useQrScanner` instead. It provided access to `showScanQrPopup` and `closeScanQrPopup` functions.

```APIDOC
## useWebAppQrScanner (Deprecated)

::: danger Deprecated
Use [useQrScanner](#useqrscanner) instead.
:::

### Description

The `useWebAppQrScanner` composable is a deprecated feature for interacting with the Telegram Web App's QR scanner functionality. It provided methods to control the QR scanner popup.

### Usage

```ts
import { useWebAppQrScanner } from 'vue-tg'

// Access the functions provided by the composable
const { showScanQrPopup, closeScanQrPopup } = useWebAppQrScanner()

// Example of showing the QR scanner popup
// showScanQrPopup({
//   // Optional parameters for the popup
// })

// Example of closing the QR scanner popup
// closeScanQrPopup()
```

### Methods

- **`showScanQrPopup`**
  - Description: Displays the QR scanner popup to the user.
  - Parameters: Accepts an optional object with parameters to configure the popup.
  - Type: <!--@include: @/generated/WebApp-showScanQrPopup.md -->

- **`closeScanQrPopup`**
  - Description: Closes the currently displayed QR scanner popup.
  - Parameters: None.
  - Type: <!--@include: @/generated/WebApp-closeScanQrPopup.md -->

### Note

This composable is no longer recommended for use. Please migrate to the `useQrScanner` composable for current and future QR scanning needs.
```

--------------------------------

### Import and Initialize useClipboard

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables/use-clipboard.md

Import the useClipboard composable from vue-tg and initialize it. This sets up the necessary functions for clipboard interaction.

```typescript
import { useClipboard } from 'vue-tg'

const clipboard = useClipboard()
```

--------------------------------

### SettingsButton Component Usage

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/components/settings-button.md

This snippet demonstrates how to import and use the SettingsButton component in a Vue.js application. It includes basic setup for handling the click event.

```APIDOC
## SettingsButton Component

### Description
A component that enables the settings button when rendered. It can be configured using props and emits events on user interaction.

### Usage
```vue
<script lang="ts" setup>
import { SettingsButton } from 'vue-tg'

function handleSettingsButton() {
  // Handle the settings button click event
  console.log('Settings button clicked!')
}
</script>

<template>
  <SettingsButton @click="handleSettingsButton" />
</template>
```

### Props
#### visible (boolean)
- **Optional**
- Shows whether the button is visible. Set to true by default.

### Events
#### click
- **Type**: `() => void`
- **Description**: Emits when the settings button is pressed.
```

--------------------------------

### Import and Initialize useSettingsButton

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables/use-settings-button.md

Import the useSettingsButton composable and initialize it to access its properties and methods. This is the first step to using the settings button functionality.

```typescript
import { useSettingsButton } from 'vue-tg'

const settingsButton = useSettingsButton()
```

--------------------------------

### Import and Use useDeviceOrientation

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables/use-device-orientation.md

Import the composable and call it to get reactive device orientation data. This is the primary way to access device orientation features.

```typescript
import { useDeviceOrientation } from 'vue-tg'

const deviceOrientation = useDeviceOrientation()
```

--------------------------------

### Initialize useSecureStorage

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables/use-secure-storage.md

Import and initialize the useSecureStorage composable. This provides access to secure storage methods.

```typescript
import { useSecureStorage } from 'vue-tg'

const secureStorage = useSecureStorage()
```

--------------------------------

### Initialize and Use Telegram Mini App Context

Source: https://context7.com/deptyped/vue-telegram/llms.txt

Exposes the root Telegram Mini App context, including init data, platform, version, and navigation helpers. Use this composable to interact with the Mini App API, such as signaling readiness, handling activation events, opening links, sending data, downloading files, sharing messages, and requesting permissions or contacts.

```vue
<script lang="ts" setup>
import { useMiniApp } from 'vue-tg'
import { watch } from 'vue'

const miniApp = useMiniApp()

// Signal to Telegram that the app is ready to display
miniApp.ready()

// Reactive — re-render whenever the app is (de)activated
watch(miniApp.isActive, (active) => {
  if (active) startPolling()
  else stopPolling()
})

// Check platform
if (miniApp.isPlatform('ios')) {
  console.log('Running on iOS Telegram client')
}

// Open an external URL
miniApp.openLink('https://example.com', { try_instant_view: true })

// Open a Telegram deep-link
miniApp.openTelegramLink('https://t.me/username')

// Send data back to the bot (closes the Mini App)
miniApp.sendData(JSON.stringify({ action: 'purchase', itemId: 42 }))

// Download a file (Bot API 8.0+)
if (miniApp.isVersionAtLeast('8.0')) {
  const status = await miniApp.downloadFile({
    url: 'https://example.com/report.pdf',
    file_name: 'report.pdf',
  })
  console.log(status) // 'downloading' | 'cancelled'
}

// Share a prepared message (Bot API 8.0+)
if (miniApp.isVersionAtLeast('8.0')) {
  await miniApp.shareMessage('prepared_message_id')
}

// Request write permission from the bot
const granted = await miniApp.requestWriteAccess()

// Request the user's phone contact
const contact = await miniApp.requestContact()

// Close the Mini App
miniApp.close()
</script>

<template>
  <div>Platform: {{ miniApp.platform }} | Version: {{ miniApp.version }}</div>
</template>
```

--------------------------------

### Basic Post Widget Integration

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/widgets/post-widget.md

Integrate the PostWidget component into your Vue application by providing the URL of the Telegram post. Ensure the 'vue-tg' library is installed and imported.

```vue
<script lang="ts" setup>
import { PostWidget } from 'vue-tg'
</script>

<template>
  <PostWidget url="durov/68" />
</template>
```

--------------------------------

### Reacting to Mini App State Changes

Source: https://github.com/deptyped/vue-telegram/blob/main/README.md

Example of using a watcher to react to changes in the miniApp.isActive state. This pattern can be used with any reactive field provided by vue-tg.

```typescript
const miniApp = useMiniApp()

watch(miniApp.isActive, (isActive) => {
  if (isActive)
    startUpdating()
  else
    stopUpdating()
})
```

--------------------------------

### useQrScanner Methods

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables/use-qr-scanner.md

This composable provides several methods to interact with the QR scanner. These include showing and closing the scanner popup, setting event handlers for scan results and popup closures, and checking the Web App SDK version.

```APIDOC
## useQrScanner

### Description
Provides methods to interact with the QR scanner functionality in the Telegram Web App.

### Methods

- **`show()`**
  - Description: Displays the QR scanner popup to the user. This is an asynchronous method.
  - Type: `async`

- **`close()`**
  - Description: Closes the QR scanner popup.
  - Type: `void`

- **`onScan(callback: (text: string) => void)`**
  - Description: Sets an event handler that is called when QR code text is received. This is an alias for `onQrTextReceived`.
  - Parameters:
    - `callback` (function) - The function to execute when a QR code is scanned. It receives the scanned text as a string argument.
  - Bot API Version: 6.4+

- **`onClose(callback: () => void)`**
  - Description: Sets an event handler that is called when the QR scanner popup is closed. This is an alias for `onScanQrPopupClosed`.
  - Parameters:
    - `callback` (function) - The function to execute when the popup is closed.
  - Bot API Version: 7.7+

- **`version()`**
  - Description: Returns the current version of the Telegram Web App SDK.
  - Type: `string`

- **`isVersionAtLeast(version: string)`**
  - Description: Checks if the current Telegram Web App SDK version is at least the specified version.
  - Parameters:
    - `version` (string) - The version string to compare against.
  - Returns: `boolean`
```

--------------------------------

### Nuxt 3 Integration: Client-Only Components

Source: https://context7.com/deptyped/vue-telegram/llms.txt

Wrap Mini App components in `<ClientOnly>` in your Nuxt 3 application to ensure they render only on the client side. This example shows how to use `usePopup` and `MainButton`.

```vue
<!-- components/MiniApp.vue -->
<script lang="ts" setup>
import { MainButton, usePopup } from 'vue-tg'

const popup = usePopup()
</script>

<template>
  <MainButton text="Say Hello" @click="() => popup.showAlert('Hello from Nuxt!')" />
</template>

```

```vue
<!-- app.vue -->
<template>
  <NuxtPage />
  <ClientOnly>
    <MiniApp />
  </ClientOnly>
</template>

<script setup lang="ts">
import MiniApp from '~/components/MiniApp.vue'
</script>

```

--------------------------------

### Import and Initialize useHomeScreen

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables/use-home-screen.md

Import the useHomeScreen composable from vue-tg and initialize it to access its methods.

```typescript
import { useHomeScreen } from 'vue-tg'

const homeScreen = useHomeScreen()
```

--------------------------------

### Basic Share Widget Implementation

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/widgets/share-widget.md

This snippet shows how to import and use the ShareWidget component in a Vue application. It requires the 'vue-tg' library to be installed. The 'url' and 'comment' props are essential for defining the shared content.

```vue
<script lang="ts" setup>
import { ShareWidget } from 'vue-tg'
</script>

<template>
  <ShareWidget 
    url="https://vue-tg.pages.dev" 
    comment="Telegram integration for Vue" 
  />
</template>
```

--------------------------------

### Import and Initialize usePopup

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables/use-popup.md

Import the usePopup composable and initialize it to access its methods. This is the first step to using any of the popup-related functionalities.

```typescript
import { usePopup } from 'vue-tg'

const popup = usePopup()
```

--------------------------------

### Import and Use useMiniApp

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables/use-mini-app.md

Import the useMiniApp composable from 'vue-tg' and call it to get access to the Mini App instance. This is the primary way to interact with the Telegram Mini App API within your Vue application.

```typescript
import { useMiniApp } from 'vue-tg'

const miniApp = useMiniApp()
```

--------------------------------

### useDeviceStorage

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables/use-device-storage.md

Initializes the useDeviceStorage composable. This composable provides access to methods for managing device storage.

```APIDOC
## useDeviceStorage

### Description
Initializes the useDeviceStorage composable, providing an interface to interact with the device's storage.

### Usage
```ts
import { useDeviceStorage } from 'vue-tg'

const deviceStorage = useDeviceStorage()
```

### Methods

#### `setItem(key: string, value: string): Promise<void>`

Stores a key-value pair in the device storage. This is an asynchronous operation.

#### `getItem(key: string): Promise<string | null>`

Retrieves the value associated with a given key from the device storage. Returns `null` if the key is not found. This is an asynchronous operation.

#### `removeItem(key: string): Promise<void>`

Removes a key-value pair from the device storage using the provided key. This is an asynchronous operation.

#### `clear(): Promise<void>`

Clears all data from the device storage. This is an asynchronous operation.

#### `version: string`

The version of the Web App API available on the device.

#### `isVersionAtLeast(version: string): boolean`

Checks if the current Web App API version is at least the specified version. Returns `true` if it is, `false` otherwise.
```

--------------------------------

### Set Custom Emoji Status with useEmojiStatus

Source: https://context7.com/deptyped/vue-telegram/llms.txt

Composable to set a custom emoji as the user's Telegram status, requiring Bot API 8.0+. It first requests access, then allows setting the emoji with an optional duration. The example includes event listeners for successful status changes and errors.

```vue
<script lang="ts" setup>
import { useEmojiStatus } from 'vue-tg'

const emojiStatus = useEmojiStatus()

async function setStatus() {
  // Request access first
  const granted = await emojiStatus.requestAccess()
  if (!granted) return

  // Set emoji status with optional duration
  await emojiStatus.set('5368324170671202286', { duration: 3600 })

  emojiStatus.onSet(() => {
    console.log('Emoji status set!')
  })

  emojiStatus.onFail((error) => {
    console.error('Failed to set emoji status:', error)
  })
}
</script>
```

--------------------------------

### useWebAppTheme

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables-legacy/use-web-app-theme.md

The `useWebAppTheme` composable is deprecated and should not be used. It previously provided access to theme parameters and methods to set header and background colors. Users should migrate to the `useTheme` composable.

```APIDOC
## useWebAppTheme (Deprecated)

::: danger Deprecated
Use [useTheme](#usetheme) instead.
:::

### Description

This composable is deprecated. It was used to interact with the Telegram Web App theme, providing reactive access to color schemes, theme parameters, and methods to customize header and background colors.

### Usage

```ts
import { useWebAppTheme } from 'vue-tg'

// This composable is deprecated and should not be used.
const { colorScheme, themeParams, headerColor, backgroundColor, setHeaderColor, setBackgroundColor } = useWebAppTheme()
```

### Properties

- **`colorScheme`** (readonly reactive) - Represents the current color scheme of the Web App.
- **`themeParams`** (readonly reactive) - Contains the theme parameters provided by the Telegram client.
- **`headerColor`** (reactive) - Allows getting and setting the header color of the Web App.
- **`backgroundColor`** (reactive) - Allows getting and setting the background color of the Web App.

### Methods

- **`setHeaderColor`** - Sets the header color of the Web App.
- **`setBackgroundColor`** - Sets the background color of the Web App.
```

--------------------------------

### useWebAppNavigation

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables-legacy/use-web-app-navigation.md

This composable is deprecated. Please use `useMiniApp` instead. It provided access to navigation-related Web App methods.

```APIDOC
## ~~useWebAppNavigation~~ 

::: danger Deprecated
Use [useMiniApp](#useminiapp) instead.
:::

```ts twoslash
// Hover to inspect type
import { useWebAppNavigation } from 'vue-tg'
```

| Name                | Type                                                      |
| :------------------ | :-------------------------------------------------------- |
| `openInvoice`       | <!--@include: @/generated/WebApp-openInvoice.md -->       |
| `openLink`          | <!--@include: @/generated/WebApp-openLink.md -->          |
| `openTelegramLink`  | <!--@include: @/generated/WebApp-openTelegramLink.md -->  |
| `switchInlineQuery` | <!--@include: @/generated/WebApp-switchInlineQuery.md --> |
```

--------------------------------

### useWebApp Properties and Methods

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables-legacy/use-web-app.md

This section details the properties and methods available in the deprecated `useWebApp` composable. It is recommended to use `useMiniApp` for new development.

```APIDOC
## useWebApp (Deprecated)

::: danger Deprecated
Use [useMiniApp](#useminiapp) instead.
:::

### Properties and Methods

- **`initData`**: Provides initialization data for the Web App.
- **`initDataUnsafe`**: Provides unsafe initialization data for the Web App.
- **`version`**: The version of the Web App SDK.
- **`platform`**: The platform the Web App is running on.
- **`isVersionAtLeast`**: Checks if the Web App SDK version is at least a specified version.
- **`sendData`**: Sends data from the Web App to the bot.
- **`ready`**: Notifies the Telegram client that the Web App is ready.
- **`close`**: Closes the Web App.
- **`isReady`**: Boolean indicating if the app is ready.
- **`isPlatform`**: Function to check if the app is running on a specified platform.
- **`isPlatformUnknown`**: Boolean indicating if the platform is unknown.
- **`isFeatureSupported`**: Function to check if a specified feature is supported.
```

--------------------------------

### useWebAppShare (Deprecated)

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables-legacy/use-web-app-share.md

This composable is deprecated and should not be used. Please refer to the `useMiniApp` composable for current sharing functionalities.

```APIDOC
## ~~useWebAppShare~~ 

::: danger Deprecated
Use [useMiniApp](#useminiapp) instead.
:::

```ts
// Hover to inspect type
import { useWebAppShare } from 'vue-tg'
```

| Name           | Type                                                 |
| :------------- | :--------------------------------------------------- |
| `shareToStory` | <!--@include: @/generated/WebApp-shareToStory.md --> |
```

--------------------------------

### Home Screen Integration

Source: https://github.com/deptyped/vue-telegram/blob/main/README.md

Methods for adding the Mini App to the home screen and checking its status using the useHomeScreen hook.

```APIDOC
## addToHomeScreen

### Description
Adds the Mini App to the user's home screen.

### Method
Not specified (likely a function call within a Vue component).

### Endpoint
N/A

### Request Example
```javascript
// Example usage with useHomeScreen
addToHomeScreen();
```

## checkHomeScreenStatus

### Description
Checks the status of whether the Mini App has been added to the home screen.

### Method
Not specified (likely a function call within a Vue component).

### Endpoint
N/A

### Response
#### Success Response (boolean)
- **isAdded** (boolean) - True if the app is added to the home screen, false otherwise.

### Request Example
```javascript
// Example usage with useHomeScreen
const status = await checkHomeScreenStatus();
console.log(status.isAdded);
```
```

--------------------------------

### Import and Initialize useHapticFeedback

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables/use-haptic-feedback.md

Import the useHapticFeedback composable from 'vue-tg' and initialize it. This sets up the ability to trigger haptic feedback within your Vue application.

```typescript
import { useHapticFeedback } from 'vue-tg'

const hapticFeedback = useHapticFeedback()
```

--------------------------------

### Import useWebAppClipboard

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables-legacy/use-web-app-clipboard.md

Import the deprecated useWebAppClipboard composable from vue-tg. Hover over the import to inspect its type.

```typescript
// Hover to inspect type
import { useWebAppClipboard } from 'vue-tg'
```

--------------------------------

### useMainButton Usage

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables/use-main-button.md

Import and initialize the useMainButton composable to access its properties and methods.

```APIDOC
## useMainButton

### Description
Initializes the `useMainButton` composable to interact with the Telegram Mini App's main button.

### Usage
```ts
import { useMainButton } from 'vue-tg'

const mainButton = useMainButton()
```

### Properties

#### Reactive Properties

- **`text`** (string): The text displayed on the main button. This property is reactive.
- **`color`** (string): The background color of the main button. This property is reactive.
- **`textColor`** (string): The text color of the main button. This property is reactive.
- **`isVisible`** (boolean): Controls the visibility of the main button. `true` to show, `false` to hide. This property is reactive.
- **`isActive`** (boolean): Indicates if the main button is currently active or enabled. This property is reactive.
- **`isProgressVisible`** (boolean): Controls the visibility of the progress animation on the main button. `true` to show, `false` to hide. This property is reactive.
- **`hasShineEffect`** (boolean): Enables or disables the shine effect on the main button. This property is reactive.
- **`iconCustomEmojiId`** (string): Sets a custom emoji as an icon for the main button. This property is reactive.

#### Methods

- **`show()`**: Makes the main button visible.
- **`hide()`**: Hides the main button.
- **`enable()`**: Enables the main button, making it clickable.
- **`disable()`**: Disables the main button, making it unclickable.
- **`showProgress()`**: Shows a progress animation on the main button.
- **`hideProgress()`**: Hides the progress animation on the main button.
- **`setParams(params: object)`**: Sets multiple parameters for the main button at once.
- **`onClick(callback: function)`**: Sets a callback function to be executed when the main button is clicked.

### Telegram Web App API Compatibility

- **`version`** (string): The version of the Telegram Web App API.
- **`isVersionAtLeast(version: string)`**: Checks if the Telegram Web App API version is at least the specified version.
```

--------------------------------

### Show Settings Button in Header with useSettingsButton

Source: https://context7.com/deptyped/vue-telegram/llms.txt

Display a settings gear icon in the Mini App header to provide access to application settings. Requires Bot API 7.0+.

```vue
<script lang="ts" setup>
import { useSettingsButton } from 'vue-tg'

const settingsButton = useSettingsButton()

settingsButton.show()

settingsButton.onClick(() => {
  openSettingsPanel()
})
</script>
```

--------------------------------

### useSecureStorage

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables/use-secure-storage.md

Initializes the useSecureStorage composable to access secure storage functionalities.

```APIDOC
## useSecureStorage

### Description
Initializes the `useSecureStorage` composable to access secure storage functionalities.

### Usage
```ts
import { useSecureStorage } from 'vue-tg'

const secureStorage = useSecureStorage()
```

### Methods

#### `setItem(key: string, value: string): Promise<void>`

Stores an item securely. This is an asynchronous operation.

#### `getItem(key: string): Promise<string | null>`

Retrieves an item securely by its key. Returns the item value or null if not found. This is an asynchronous operation.

#### `restoreItem(key: string): Promise<string | null>`

Restores a previously removed item securely. Returns the item value or null if not found or not restorable. This is an asynchronous operation.

#### `removeItem(key: string): Promise<void>`

Removes an item securely by its key. This is an asynchronous operation.

#### `clear(): Promise<void>`

Clears all securely stored items. This is an asynchronous operation.

#### `version: string`

Provides the version of the Web App.

#### `isVersionAtLeast(version: string): boolean`

Checks if the Web App version is at least the specified version.
```

--------------------------------

### Import and Initialize useGyroscope

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables/use-gyroscope.md

Import the `useGyroscope` composable from `vue-tg` and initialize it to access gyroscope functionalities.

```typescript
import { useGyroscope } from 'vue-tg'

const gyroscope = useGyroscope()
```

--------------------------------

### Import and Initialize useViewport

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables/use-viewport.md

Import the `useViewport` composable from `vue-tg` and initialize it to access viewport properties and methods.

```typescript
import { useViewport } from 'vue-tg'

const viewport = useViewport()
```

--------------------------------

### Popup Component Usage

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/components/popup.md

This snippet demonstrates how to use the Popup component, including its props and event handling.

```APIDOC
## Popup Component

A component that shows a native popup when is rendered.

```vue
<script lang="ts" setup>
import { Popup } from 'vue-tg'

function handlePopupClose(buttonId: string) {
  // ...
}
</script>

<template>
  <Popup message="Hello" @close="handlePopupClose" />
</template>
```

### Props

| Name    | Type                                                                  | Required | Description                                           |
| ------- | --------------------------------------------------------------------- | -------- | ----------------------------------------------------- |
| message | string                                                                | true     | The message to be displayed in the body of the popup. |
| title   | string                                                                | false    | The text to be displayed in the popup title.          |
| buttons | [PopupButton[] ↗](https://core.telegram.org/bots/webapps#popupbutton) | false    | List of buttons to be displayed in the popup.         |

### Events

| Name  | Type                         | Description                            |
| ----- | ---------------------------- | -------------------------------------- |
| close | `(buttonId: string) => void` | Emits when the opened popup is closed. |
```

--------------------------------

### useWebAppHapticFeedback

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables-legacy/use-web-app-haptic-feedback.md

This composable is deprecated and should not be used. It provided methods to trigger haptic feedback on the user's device. Please refer to the `useHapticFeedback` composable for the current implementation.

```APIDOC
## useWebAppHapticFeedback (Deprecated)

::: danger Deprecated
Use [useHapticFeedback](#usehapticfeedback) instead.
:::

### Description

The `useWebAppHapticFeedback` composable is a deprecated feature that provided access to the Telegram Web App's haptic feedback API. It allowed developers to trigger various haptic feedback events on the user's device.

### Usage

```ts
import { useWebAppHapticFeedback } from 'vue-tg'

// Example usage within a Vue component
const { impactOccurred, notificationOccurred, selectionChanged } = useWebAppHapticFeedback()

// To trigger an impact feedback:
impactOccurred('heavy')

// To trigger a notification feedback:
notificationOccurred('success')

// To trigger a selection changed feedback:
selectionChanged()
```

### Methods

- **`impactOccurred(style: 'light' | 'medium' | 'heavy')`**: Triggers a haptic impact feedback. The `style` parameter determines the intensity of the impact.
- **`notificationOccurred(type: 'success' | 'warning' | 'error')`**: Triggers a haptic notification feedback. The `type` parameter specifies the kind of notification.
- **`selectionChanged()`**: Triggers a haptic feedback for a selection change event.
```

--------------------------------

### useWebAppRequests

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables-legacy/use-web-app-requests.md

This composable is deprecated. Use `useMiniApp` instead. It previously provided methods to interact with the Web App's request capabilities.

```APIDOC
## ~~useWebAppRequests~~ 

::: danger Deprecated
Use [useMiniApp](#useminiapp) instead.
:::

```ts
import { useWebAppRequests } from 'vue-tg'
```

### Methods

- **requestContact**
  - Description: Requests the user's contact information.
  - Usage: `requestContact()`

- **requestWriteAccess**
  - Description: Requests write access from the user.
  - Usage: `requestWriteAccess()`

```

--------------------------------

### Import and Initialize useMainButton

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables/use-main-button.md

Import the useMainButton composable and initialize it to gain access to the main button's properties and methods.

```typescript
import { useMainButton } from 'vue-tg'

const mainButton = useMainButton()
```

--------------------------------

### useWebAppClipboard (Deprecated)

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables-legacy/use-web-app-clipboard.md

The `useWebAppClipboard` composable is deprecated. It was used to interact with the Telegram Web App's clipboard functionality. It is recommended to use the `useClipboard` composable instead.

```APIDOC
## ~~useWebAppClipboard~~ 

::: danger Deprecated
Use [useClipboard](#useclipboard) instead.
:::

```ts twoslash
// Hover to inspect type
import { useWebAppClipboard } from 'vue-tg'
```

| Name                    | Type                                                          |
| :---------------------- | :------------------------------------------------------------ |
| `readTextFromClipboard` | <!--@include: @/generated/WebApp-readTextFromClipboard.md --> |
```

--------------------------------

### Import useWebAppClosingConfirmation

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/mini-apps/composables-legacy/use-web-app-closing-confirmation.md

Import the composable from the vue-tg library. Hover over the import to inspect its type.

```typescript
import { useWebAppClosingConfirmation } from 'vue-tg'
```

--------------------------------

### useAccelerometer

Source: https://context7.com/deptyped/vue-telegram/llms.txt

Composable to start/stop and reactively read accelerometer data from the device. Requires Bot API 8.0+.

```APIDOC
## useAccelerometer

Composable to start/stop and reactively read accelerometer data from the device (Bot API 8.0+).

### Methods

- `start(options: { refresh_rate: number })`: Starts accelerometer updates.
- `stop()`: Stops accelerometer updates.
- `onChange(callback: () => void)`: Registers a callback for accelerometer data changes.
- `onFail(callback: (error: any) => void)`: Registers a callback for errors.

### Properties

- `x`: Reactive reference for the X-axis value.
- `y`: Reactive reference for the Y-axis value.
- `z`: Reactive reference for the Z-axis value.

### Example

```vue
<script lang="ts" setup>
import { useAccelerometer } from 'vue-tg'

const accelerometer = useAccelerometer()

async function startTracking() {
  await accelerometer.start({ refresh_rate: 100 })

  accelerometer.onChange(() => {
    console.log(`x=${accelerometer.x.value} y=${accelerometer.y.value} z=${accelerometer.z.value}`)
  })

  accelerometer.onFail((error) => {
    console.error('Accelerometer error:', error)
  })

  setTimeout(async () => {
    await accelerometer.stop()
  }, 5000)
}
</script>

<template>
  <div>
    <p>X: {{ accelerometer.x }}</p>
    <p>Y: {{ accelerometer.y }}</p>
    <p>Z: {{ accelerometer.z }}</p>
    <button @click="startTracking">Start</button>
  </div>
</template>
```
```

--------------------------------

### useQrScanner

Source: https://context7.com/deptyped/vue-telegram/llms.txt

Composable for displaying the native QR code scanner popup. Supports both async return and event-based scanning.

```APIDOC
## useQrScanner

Composable for displaying the native QR code scanner popup (Bot API 6.4+). Supports both async return and event-based scanning.

### Methods
- `show(options: { text: string }): Promise<string | null>`
- `close(): void`
- `onScan(callback: (data: string) => void): void`

### Example
```vue
<script lang="ts" setup>
import { useQrScanner } from 'vue-tg'
import { useMiniApp } from 'vue-tg'

const qrScanner = useQrScanner()
const miniApp = useMiniApp()

async function scanAndOpen() {
  // Await the scanned text directly
  const url = await qrScanner.show({ text: 'Scan a URL to open' })
  if (url) {
    miniApp.openLink(url)
  }
}

// Event-based alternative
qrScanner.onScan((data) => {
  console.log('Scanned:', data)
  qrScanner.close()
})
</script>

<template>
  <button @click="scanAndOpen">Scan QR</button>
</template>
```
```

--------------------------------

### Using Component Aliases in Vue

Source: https://github.com/deptyped/vue-telegram/blob/main/docs/installation.md

Demonstrates how to use the global aliases for components, such as `tg-alert`, as an alternative to direct imports.

```vue
<template>
  <tg-alert message="Hello!" />
</template>
```

--------------------------------

### useMiniApp

Source: https://context7.com/deptyped/vue-telegram/llms.txt

Provides the root Telegram Mini App context, including initialization data, platform information, navigation helpers, sharing capabilities, file downloads, and lifecycle methods. All reactive properties update automatically.

```APIDOC
## useMiniApp

Core composable exposing the root Telegram Mini App context: init data, platform, version, navigation helpers, sharing, file download, and lifecycle methods. All reactive properties update automatically.

### Methods

- **`ready()`**: Signal to Telegram that the app is ready to display.
- **`isActive`**: Reactive property that updates when the app is (de)activated.
- **`isPlatform(platform: string)`**: Checks if the app is running on a specific Telegram client platform (e.g., 'ios', 'android', 'web').
- **`openLink(url: string, options?: { try_instant_view: boolean })`**: Opens an external URL.
- **`openTelegramLink(url: string)`**: Opens a Telegram deep-link.
- **`sendData(data: string)`**: Sends data back to the bot, closing the Mini App.
- **`downloadFile(options: { url: string, file_name: string })`**: Downloads a file (Bot API 8.0+). Returns status ('downloading' | 'cancelled').
- **`shareMessage(messageId: string)`**: Shares a prepared message (Bot API 8.0+).
- **`requestWriteAccess()`**: Requests write permission from the bot. Returns a boolean indicating if granted.
- **`requestContact()`**: Requests the user's phone contact. Returns contact information.
- **`close()`**: Closes the Mini App.

### Properties

- **`platform`**: The current Telegram client platform.
- **`version`**: The current Telegram client version.

### Example Usage
```vue
<script lang="ts" setup>
import { useMiniApp } from 'vue-tg'
import { watch } from 'vue'

const miniApp = useMiniApp()

// Signal to Telegram that the app is ready to display
miniApp.ready()

// Reactive — re-render whenever the app is (de)activated
watch(miniApp.isActive, (active) => {
  if (active) startPolling() 
  else stopPolling()
})

// Check platform
if (miniApp.isPlatform('ios')) {
  console.log('Running on iOS Telegram client')
}

// Open an external URL
miniApp.openLink('https://example.com', { try_instant_view: true })

// Open a Telegram deep-link
miniApp.openTelegramLink('https://t.me/username')

// Send data back to the bot (closes the Mini App)
miniApp.sendData(JSON.stringify({ action: 'purchase', itemId: 42 }))

// Download a file (Bot API 8.0+)
if (miniApp.isVersionAtLeast('8.0')) {
  const status = await miniApp.downloadFile({
    url: 'https://example.com/report.pdf',
    file_name: 'report.pdf',
  })
  console.log(status) // 'downloading' | 'cancelled'
}

// Share a prepared message (Bot API 8.0+)
if (miniApp.isVersionAtLeast('8.0')) {
  await miniApp.shareMessage('prepared_message_id')
}

// Request write permission from the bot
const granted = await miniApp.requestWriteAccess()

// Request the user's phone contact
const contact = await miniApp.requestContact()

// Close the Mini App
miniApp.close()
</script>

<template>
  <div>Platform: {{ miniApp.platform }} | Version: {{ miniApp.version }}</div>
</template>
```
```