Vue Telegram

https://vue-tg.deptyped.com/
Admin
Vue Telegram provides integration for Telegram features, including Mini Apps and Widgets, within...
Tokens:31,345
Snippets:132
Trust Score:4.7
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install vue-tg Package with npm

Source: https://vue-tg.deptyped.com/installation

This command installs the vue-tg package, which is necessary for integrating Telegram Mini App functionalities into your Vue.js project. It is a prerequisite for all subsequent integration steps.

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

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

### Using vue-tg Component Aliases in Vue

Source: https://vue-tg.deptyped.com/installation

This Vue template demonstrates the use of component aliases provided by the vue-tg plugin. It shows how to render an `Alert` component using its alias `tg-alert`, simplifying template code.

```vue
<!-- Without alias -->

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

<template>
  <Alert message="Hello!" />
</template>

<!-- Same using an alias of the component -->

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

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

### Initialize useQrScanner Hook in Vue-TG

Source: https://vue-tg.deptyped.com/mini-apps

This code imports and initializes the `useQrScanner` composable from the `vue-tg` library. This hook is used to integrate QR code scanning functionality within a Vue Telegram Mini App. It provides methods to display the scanner, handle received QR code data, and manage the scanner's open/close states. The `vue-tg` library must be installed.

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

const qrScanner = useQrScanner()
```

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

### Cloud Storage API (useCloudStorage)

Source: https://vue-tg.deptyped.com/mini-apps

Methods for interacting with the Telegram Web App's cloud storage. This includes setting, getting, removing single or multiple storage items, and retrieving all keys.

```APIDOC
## Cloud Storage API (useCloudStorage)

### Description
Methods for interacting with the Telegram Web App's cloud storage. This includes setting, getting, removing single or multiple storage items, and retrieving all keys.

### Methods

#### `setStorageItem(key: string, value: string, callback?: Function)`

- **Description**: Stores a value in the cloud storage using the specified key. The key should contain 1-128 characters (A-Z, a-z, 0-9, _, -). The value should contain 0-4096 characters. Up to 1024 keys can be stored. If a callback is provided, it will be called with an error or success status.
- **Parameters**:
  - `key` (string) - Required - The key for the storage item.
  - `value` (string) - Required - The value to store.
  - `callback` (Function) - Optional - A callback function.

#### `getStorageItem(key: string, callback?: Function)`

- **Description**: Retrieves a value from the cloud storage using the specified key. The key should contain 1-128 characters (A-Z, a-z, 0-9, _, -). If a callback is provided, it will be called with an error or the retrieved value.
- **Parameters**:
  - `key` (string) - Required - The key of the storage item to retrieve.
  - `callback` (Function) - Optional - A callback function.

#### `getStorageItems(keys: string[], callback?: Function)`

- **Description**: Retrieves values from the cloud storage using the specified keys. The keys should contain 1-128 characters (A-Z, a-z, 0-9, _, -). If a callback is provided, it will be called with an error or the retrieved values.
- **Parameters**:
  - `keys` (string[]) - Required - An array of keys for the storage items to retrieve.
  - `callback` (Function) - Optional - A callback function.

#### `removeStorageItem(key: string, callback?: Function)`

- **Description**: Removes a value from the cloud storage using the specified key. The key should contain 1-128 characters (A-Z, a-z, 0-9, _, -). If a callback is provided, it will be called with an error or a boolean indicating successful removal.
- **Parameters**:
  - `key` (string) - Required - The key of the storage item to remove.
  - `callback` (Function) - Optional - A callback function.

#### `removeStorageItems(keys: string[], callback?: Function)`

- **Description**: Removes values from the cloud storage using the specified keys. The keys should contain 1-128 characters (A-Z, a-z, 0-9, _, -). If a callback is provided, it will be called with an error or a boolean indicating successful removal.
- **Parameters**:
  - `keys` (string[]) - Required - An array of keys for the storage items to remove.
  - `callback` (Function) - Optional - A callback function.

#### `getStorageKeys(callback?: Function)`

- **Description**: Retrieves a list of all keys stored in the cloud storage. If a callback is provided, it will be called with an error or the list of keys.
- **Parameters**:
  - `callback` (Function) - Optional - A callback function.

### Request Examples

```json
{
  "key": "user_preference",
  "value": "dark_mode"
}
```

```json
{
  "keys": ["key1", "key2"]
}
```

### Response Examples

#### Success Response (200)

- **setStorageItem/removeStorageItem/removeStorageItems**:
  - `success` (boolean) - Indicates if the operation was successful.

- **getStorageItem**:
  - `value` (string) - The retrieved value.

- **getStorageItems**:
  - `values` (object) - An object where keys are the requested keys and values are their corresponding stored values.

- **getStorageKeys**:
  - `keys` (string[]) - An array of all stored keys.

```json
{
  "success": true
}
```

```json
{
  "value": "dark_mode"
}
```

```json
{
  "values": {
    "key1": "value1",
    "key2": "value2"
  }
}
```

```json
{
  "keys": ["key1", "key2", "key3"]
}
```
```

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

### Initialize Secure Storage with useSecureStorage (TypeScript)

Source: https://vue-tg.deptyped.com/mini-apps

Initializes the secure storage interface from vue-tg. This allows for secure storage and retrieval of data within the Telegram Web App. It requires the 'vue-tg' library to be installed.

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

const secureStorage = useSecureStorage()
```

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

### Initialize useViewport in Vue

Source: https://vue-tg.deptyped.com/mini-apps

Demonstrates how to import and initialize the useViewport composable from the 'vue-tg' library in a Vue component. This setup is essential for accessing viewport-related properties.

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

const viewport = useViewport()
```

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

### Initialize usePopup Hook in Vue-TG

Source: https://vue-tg.deptyped.com/mini-apps

This snippet demonstrates how to import and initialize the `usePopup` composable from the `vue-tg` library. This hook provides methods to interact with Telegram's native popup functionalities, such as showing confirmation dialogs, alerts, or custom popups. It requires the `vue-tg` library to be installed and configured.

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

const popup = usePopup()
```

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

### Configure Nuxt 3 for Telegram Web App Script

Source: https://vue-tg.deptyped.com/installation

This Nuxt configuration file (nuxt.config.ts) shows how to include the Telegram Web App script in the head of your Nuxt application. This ensures the script is loaded correctly for client-side interactions.

```ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [{ src: 'https://telegram.org/js/telegram-web-app.js' }],
    },
  },
})
```

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

### Create MiniApp.vue Component with vue-tg in Nuxt 3

Source: https://vue-tg.deptyped.com/installation

This Vue component (MiniApp.vue) for Nuxt 3 demonstrates using `MainButton` and `useWebAppPopup` from `vue-tg`. It shows how to display a button that triggers a Telegram alert when clicked.

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

const { showAlert } = useWebAppPopup()
</script>

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

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

### Include Telegram Web App Script in HTML

Source: https://vue-tg.deptyped.com/installation

This HTML snippet demonstrates how to include the Telegram Web App JavaScript file in the head of your HTML document. This script is essential for enabling communication between your Mini App and the Telegram client.

```html
<script src="https://telegram.org/js/telegram-web-app.js"></script>
```

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

### Integrate MiniApp.vue into App.vue with ClientOnly in Nuxt 3

Source: https://vue-tg.deptyped.com/installation

This App.vue file for Nuxt 3 shows how to import and render the `MiniApp.vue` component within a `<ClientOnly>` tag. This ensures that the Mini App components are only rendered on the client-side, preventing server-side rendering issues.

```vue
<template>
  <NuxtPage />
  <ClientOnly>
    <MiniApp />
  </ClientOnly>
</template>

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

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

### Version Check for shareToStory in Vue-Tg

Source: https://vue-tg.deptyped.com/mini-apps

Demonstrates how to check if the Telegram client version supports a specific feature like `shareToStory` before invoking it. It shows an example of conditional invocation and how to handle potential 'undefined' errors.

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

const 
miniApp
 =
useMiniApp
()

// error because this method was introduced in version 7.8
miniApp.shareToStory("https://url-to-image")
Cannot invoke an object which is possibly 'undefined'.

// first, ensure the version is 7.8 or higher
if (
miniApp
.
isVersionAtLeast
('7.8')) {
  
miniApp
.
shareToStory
("https://url-to-image") // no error
}
```

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

### Use Vue TG Theme Composable for Event Handling

Source: https://vue-tg.deptyped.com/mini-apps

This example shows how to use the useTheme composable from vue-tg to listen for theme changes. The onChange method is called when the theme is updated, allowing for reactive handling of theme changes in the application.

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

const theme = useTheme()

theme.onChange(() => {
  // handle theme update
  console.log('Theme changed via composable!')
})
```

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

### Import useWebAppViewport (Vue 3/TypeScript)

Source: https://vue-tg.deptyped.com/mini-apps

Demonstrates how to import the deprecated `useWebAppViewport` composable from the `vue-tg` library. This import statement is the starting point for accessing viewport-related functionalities within a Vue 3 application using TypeScript.

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

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

### useSettingsButton API

Source: https://vue-tg.deptyped.com/mini-apps

Provides methods to manage the Settings item in the context menu, allowing it to be shown, hidden, and have click events handled.

```APIDOC
## useSettingsButton

### Description
Provides methods to manage the Settings item in the context menu, allowing it to be shown, hidden, and have click events handled.

### Properties

- **isVisible**: boolean (reactive)
  Shows whether the context menu item is visible. Set to `false` by default.

### Methods

- **show(): void**
  Bot API 7.0+ Makes the Settings item in the context menu visible.

- **hide(): void**
  Bot API 7.0+ Hides the Settings item in the context menu.

- **onClick(callback: () => void): void**
  Bot API 7.0+ Sets the press event handler for the Settings item in the context menu. An alias for `Telegram.WebApp.onEvent('settingsButtonClicked', callback)`.

- **version(): string**
  The version of the Bot API available in the user's Telegram app.

- **isVersionAtLeast(version: string): boolean**
  Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.

### Request Example
```typescript
import { useSettingsButton } from 'vue-tg'

const settingsButton = useSettingsButton()

// Show the settings button
settingsButton.show()

// Handle click event
settingsButton.onClick(() => {
  console.log('Settings button clicked!')
  // Add your settings logic here
})

// Hide the settings button after some action
// settingsButton.hide()
```
```

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

### Theme API (Deprecated)

Source: https://vue-tg.deptyped.com/mini-apps

Provides access to theme information and methods to set header and background colors. These methods are deprecated and `useTheme` should be used instead.

```APIDOC
## Deprecated: useWebAppTheme

### Description
Methods and properties related to the Telegram Web App theme. It is recommended to use `useTheme` instead.

### Properties

#### colorScheme

- **Description**: The current color scheme ('light' or 'dark').
- **Also available as**: CSS variable `var(--tg-color-scheme)`.
- **Type**: `string` (readonly reactive)

#### themeParams

- **Description**: An object containing current theme settings.
- **Type**: `object` (readonly reactive)

#### headerColor

- **Description**: The current header color in `#RRGGBB` format.
- **Type**: `string` (reactive)

#### backgroundColor

- **Description**: The current background color in `#RRGGBB` format.
- **Type**: `string` (reactive)

### Methods

#### setHeaderColor

- **Description**: Sets the app header color.
- **Bot API Version**: 6.1+
- **Color**: Accepts `#RRGGBB` format or keywords `bg_color`, `secondary_bg_color`.
- **Note**: Behavior limited up to Bot API 6.9 regarding accepted values.

#### setBackgroundColor

- **Description**: Sets the app background color.
- **Bot API Version**: 6.1+
- **Color**: Accepts `#RRGGBB` format or keywords `bg_color`, `secondary_bg_color`.
```

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

### Platform and Version Info

Source: https://vue-tg.deptyped.com/mini-apps

Methods for checking platform and Bot API version compatibility.

```APIDOC
## POST /isPlatform

### Description
Function to check if the app is running on a specified platform.

### Method
POST

### Endpoint
/isPlatform

### Parameters
#### Query Parameters
- **platform** (string) - Required - The platform to check against (e.g., 'android', 'ios', 'web').

### Request Example
```json
{
  "platform": "android"
}
```

### Response
#### Success Response (200)
- **is_platform** (boolean) - Returns true if the app is running on the specified platform.

#### Response Example
```json
{
  "is_platform": true
}
```
```

```APIDOC
## GET /version

### Description
Returns the version of the Bot API available in the user's Telegram app.

### Method
GET

### Endpoint
/version

### Parameters
None

### Request Example
```json
{}
```

### Response
#### Success Response (200)
- **version** (string) - The Bot API version.

#### Response Example
```json
{
  "version": "6.9"
}
```
```

```APIDOC
## POST /isVersionAtLeast

### Description
Returns `true` if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.

### Method
POST

### Endpoint
/isVersionAtLeast

### Parameters
#### Query Parameters
- **version** (string) - Required - The Bot API version to compare against.

### Request Example
```json
{
  "version": "7.0"
}
```

### Response
#### Success Response (200)
- **meets_requirement** (boolean) - Returns true if the app version meets or exceeds the specified version.

#### Response Example
```json
{
  "meets_requirement": true
}
```
```

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

### Register vue-tg Plugin Globally in Vue

Source: https://vue-tg.deptyped.com/installation

This TypeScript code registers the Vue Telegram Plugin globally within a Vue application. After registration, you can use component aliases like `tg-alert` instead of importing them directly.

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

Vue.use(VueTelegramPlugin)
```

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

### Haptic Feedback API (useHapticFeedback)

Source: https://vue-tg.deptyped.com/mini-apps

Methods for triggering haptic feedback on the user's device to enhance the user experience with visual cues.

```APIDOC
## Haptic Feedback API (useHapticFeedback)

### Description
Methods for triggering haptic feedback on the user's device to enhance the user experience with visual cues.

### Methods

#### `impactOccurred(style: 'light' | 'medium' | 'heavy' | 'rigid' | 'soft')`

- **Description**: Informs the Telegram app that an impact occurred. The app may play appropriate haptics based on the provided style.
- **Parameters**:
  - `style` (string) - Required - The style of impact. Can be one of: `light`, `medium`, `heavy`, `rigid`, `soft`.

#### `notificationOccurred(type: 'error' | 'success' | 'warning')`

- **Description**: Informs the Telegram app that a task or action has succeeded, failed, or produced a warning. The app may play appropriate haptics based on the provided type.
- **Parameters**:
  - `type` (string) - Required - The type of notification. Can be one of: `error`, `success`, `warning`.

#### `selectionChanged()`

- **Description**: Informs the Telegram app that the user has changed a selection. The app may play appropriate haptics. Use this only when the selection changes, not when a user makes or confirms a selection.

### Request Examples

```javascript
impactOccurred('medium');
```

```javascript
notificationOccurred('success');
```

```javascript
selectionChanged();
```

### Response Examples

There are no direct response bodies for these methods as they trigger device-level haptic feedback.
```

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

### Initialize useAccelerometer in Vue

Source: https://vue-tg.deptyped.com/mini-apps

Imports and initializes the useAccelerometer composable from vue-tg. This composable provides access to accelerometer data and controls for tracking. It requires no initial parameters.

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

const accelerometer = useAccelerometer()
```

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

### Initialize Cloud Storage Hook in Vue

Source: https://vue-tg.deptyped.com/mini-apps

Demonstrates how to import and initialize the `useCloudStorage` hook from the 'vue-tg' library. This hook provides methods to interact with Telegram's cloud storage for storing and retrieving user data.

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

const cloudStorage = useCloudStorage()
```

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

### useWebAppNavigation (Deprecated)

Source: https://vue-tg.deptyped.com/mini-apps

This section details the deprecated useWebAppNavigation hook. It lists its methods and recommends using useMiniApp instead.

```APIDOC
## useWebAppNavigation (Deprecated)

**Description**: This hook is deprecated. Please use `useMiniApp` instead.

### Methods

- **`openInvoice(url: string, callback?: function)`**: Bot API 6.1+ Opens an invoice using the provided `url`. Listens for the `invoiceClosed` event. If a `callback` function is provided, it will be called with the invoice status.
- **`openLink(url: string, options?: object)`**: Opens a link in an external browser without closing the Mini App. If `options.try_instant_view = true` is passed, the link will attempt to open in Instant View mode (Bot API 6.4+). This method can only be called in response to user interaction.
- **`openTelegramLink(url: string)`**: Opens a Telegram link within the Telegram app. The Mini App will not close. (Note: Up to Bot API 7.0, the Mini App *would* close).
- **`switchInlineQuery(query: string, chooseChatTypes?: string[])`**: Bot API 6.7+ Inserts the bot's username and the specified inline `query` into the current chat's input field. If `chooseChatTypes` is provided, the user will be prompted to select a chat type (users, bots, groups, channels) before the query is inserted.

### Request Example

```javascript
import { useWebAppNavigation } from 'vue-tg';

const { openLink, switchInlineQuery } = useWebAppNavigation();

openLink('https://example.com');
switchInlineQuery('search');
```

### Response Example

No direct response, but actions are performed in the Telegram client.
```

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

### Manage Settings Button with useSettingsButton (TypeScript)

Source: https://vue-tg.deptyped.com/mini-apps

Initializes the settings button interface from vue-tg. This allows for controlling the visibility and behavior of the settings button in the Telegram Web App context menu. It requires the 'vue-tg' library.

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

const settingsButton = useSettingsButton()
```

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

### Explicitly Setting Base Version in Vue-Tg

Source: https://vue-tg.deptyped.com/mini-apps

Illustrates how to explicitly set the base version of the Telegram Bot API when importing composables, ensuring compatibility with features introduced from that version onwards. Includes an example of a feature that might not be available in the set version.

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

const 
miniApp
 =
useMiniApp
()


miniApp
.
shareToStory
("https://url-to-image") // no error

// error because this method was introduced in version 8.0
miniApp.downloadFile({ 
url
 : "https://url-to-image", 
file_name
 : "kitten.png" })
Cannot invoke an object which is possibly 'undefined'.
```

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

### Vue-TG: Share Media to Story

Source: https://vue-tg.deptyped.com/mini-apps

Opens the native story editor with specified media. An optional `params` argument allows for additional sharing settings. Available from Bot API 7.8+.

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

const {
  shareToStory
} = useWebAppShare()

const mediaUrl = 'https://example.com/your-image.png'
const params = {
  // Optional StoryShareParams
}

shareToStory(mediaUrl, params)
```

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

### Initialize useBackButton in Vue

Source: https://vue-tg.deptyped.com/mini-apps

Imports and initializes the useBackButton composable from vue-tg. This composable allows control over the Telegram back button, including its visibility and click event handling. It requires no initial parameters.

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

const backButton = useBackButton()
```

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

### Use Gyroscope Hook in Vue

Source: https://vue-tg.deptyped.com/mini-apps

The `useGyroscope` hook provides access to the device's gyroscope data. It allows starting and stopping tracking, and subscribing to gyroscope events like `onStart`, `onChange`, and `onFail`. It also provides reactive properties for rotation rates (x, y, z) and the API version.

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

const gyroscope = useGyroscope()
```

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

### Settings Button API (Deprecated)

Source: https://vue-tg.deptyped.com/mini-apps

Provides methods for showing and hiding the Settings button in the context menu. These methods are deprecated and `useSettingsButton` should be used instead.

```APIDOC
## Deprecated: useWebAppSettingsButton

### Description
Methods for managing the Settings button visibility. It is recommended to use `useSettingsButton` instead.

### Properties

#### isSettingsButtonVisible

- **Description**: Returns whether the context menu item is visible.
- **Default**: `false`
- **Type**: `boolean` (reactive)

### Methods

#### showSettingsButton

- **Description**: Makes the Settings item in the context menu visible.
- **Bot API Version**: 7.0+

#### hideSettingsButton

- **Description**: Hides the Settings item in the context menu.
- **Bot API Version**: 7.0+
```

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

### Initialize and Use Clipboard in Vue

Source: https://vue-tg.deptyped.com/mini-apps

Shows how to initialize and use the Clipboard hook in Vue.js for reading text from the user's clipboard. This functionality requires Bot API 6.4+ and is restricted to specific user interactions and Mini App launch methods.

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

const clipboard = useClipboard()

// Example usage:
// clipboard.readText()
// clipboard.onReadText((text) => {
//   console.log('Clipboard text:', text)
// })
// console.log(clipboard.version)
// console.log(clipboard.isVersionAtLeast('6.4'))
```

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

### Clipboard API

Source: https://vue-tg.deptyped.com/mini-apps

Methods for interacting with the user's clipboard, allowing the web app to read text from it.

```APIDOC
## Clipboard API

### Description
Provides functionality to read text from the user's clipboard.

### Method
- **readTextFromClipboard** (Bot API 6.4+) - Requests text from the clipboard. The web app will receive the `clipboardTextReceived` event. Accepts an optional callback.

### Notes
This method can only be called for Mini Apps launched from the attachment menu and requires user interaction.
```

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

### Import useWebAppCloudStorage Hook (TypeScript)

Source: https://vue-tg.deptyped.com/mini-apps

Imports the deprecated `useWebAppCloudStorage` hook from the `vue-tg` library. This hook is used for interacting with Telegram's cloud storage.

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

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

### useTheme API

Source: https://vue-tg.deptyped.com/mini-apps

Provides reactive properties and methods to access and react to the current theme and color scheme of the Telegram app.

```APIDOC
## useTheme

### Description
Provides reactive properties and methods to access and react to the current theme and color scheme of the Telegram app.

### Properties

- **colorScheme**: 'light' | 'dark' (readonly reactive)
  The color scheme currently used in the Telegram app. Also available as the CSS variable `var(--tg-color-scheme)`.

- **themeParams**: object (readonly reactive)
  An object containing the current theme settings used in the Telegram app.

- **headerColor**: string (reactive)
  Current header color in the `#RRGGBB` format.

- **backgroundColor**: string (reactive)
  Current background color in the `#RRGGBB` format.

- **bottomBarColor**: string (reactive)
  Current bottom bar color in the `#RRGGBB` format.

### Methods

- **onChange(callback: () => void): void**
  Sets an event handler for theme changes. An alias for `onThemeChanged`.

- **version(): string**
  The version of the Bot API available in the user's Telegram app.

- **isVersionAtLeast(version: string): boolean**
  Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.

### Request Example
```typescript
import { useTheme } from 'vue-tg'

const theme = useTheme()

console.log('Current color scheme:', theme.colorScheme)
console.log('Theme parameters:', theme.themeParams)

// React to theme changes
theme.onChange(() => {
  console.log('Theme changed!', theme.colorScheme)
})

// You can also directly manipulate theme colors (if supported by the platform)
// theme.headerColor = '#FF0000' // Set header to red
```

### Response Example
```json
{
  "colorScheme": "dark",
  "themeParams": {
    "bg_color": "#23262e",
    "text_color": "#ffffff",
    "link_color": "#3b8eec",
    "button_color": "#3b8eec",
    "button_text_color": "#ffffff",
    "secondary_bg_color": "#181a1f",
    "hint_color": "#9ca0a3",
    "accent_text_color": "#007aff"
  },
  "headerColor": "#23262e",
  "backgroundColor": "#23262e",
  "bottomBarColor": "#23262e"
}
```
```

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

### Import useWebAppHapticFeedback Hook (TypeScript)

Source: https://vue-tg.deptyped.com/mini-apps

Imports the deprecated `useWebAppHapticFeedback` hook from the `vue-tg` library. This hook is used for triggering haptic feedback on the user's device.

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

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

### Initialize Vue-TG Device Storage Hook

Source: https://vue-tg.deptyped.com/mini-apps

Initializes the `useDeviceStorage` hook from `vue-tg`. This hook provides methods to interact with the device's local storage for storing and retrieving data within a Telegram Mini App. It requires Bot API 9.0+.

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

const deviceStorage = useDeviceStorage()
```

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

### useHomeScreen API

Source: https://vue-tg.deptyped.com/mini-apps

Provides functionality to interact with the 'add to home screen' feature for Mini Apps.

```APIDOC
## useHomeScreen

### Description
Provides functionality to interact with the 'add to home screen' feature for Mini Apps.

### Methods

- **`addShortcut()`**: Bot API 8.0+ Prompts the user to add the Mini App to the home screen. Triggers `onShortcutAdd` event upon success.
- **`onShortcutAdd(handler: () => void)`**: Bot API 8.0+ Sets an event handler for when the shortcut is successfully added to the home screen. Alias for `onHomeScreenAdded`.
- **`checkShortcutStatus(callback?: (status: 'unsupported' | 'unknown' | 'added' | 'missed') => void)`**: Bot API 8.0+ Checks if adding to the home screen is supported and if the Mini App is already added. An optional callback receives the status.
- **`onShortcutCheck(handler: (status: 'unsupported' | 'unknown' | 'added' | 'missed') => void)`**: Bot API 8.0+ Sets an event handler for the result of checking the home screen shortcut status. Alias for `onHomeScreenChecked`.
- **`version`** (string): The version of the Bot API available in the user's Telegram app.
- **`isVersionAtLeast(version: string)`**: Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.
```

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

### Device Storage API

Source: https://vue-tg.deptyped.com/mini-apps

APIs for interacting with the user's device local storage.

```APIDOC
## Device Storage API

### Description
Provides methods to store, retrieve, remove, and clear data from the user's device local storage.

### Methods

- **`setItem(key: string, value: any, callback?: (error: Error | null, success: boolean) => void)`**
  - Bot API 9.0+
  - Stores a value in the device's local storage using the specified key.
  - Returns null and a boolean indicating success if a callback is provided, otherwise returns a Promise resolving to a boolean.

- **`getItem(key: string, callback?: (error: Error | null, value: any) => void)`**
  - Bot API 9.0+
  - Retrieves a value from the device's local storage using the specified key.
  - Returns null and the value if a callback is provided, otherwise returns a Promise resolving to the value.

- **`removeItem(key: string, callback?: (error: Error | null, success: boolean) => void)`**
  - Bot API 9.0+
  - Removes a value from the device's local storage using the specified key.
  - Returns null and a boolean indicating success if a callback is provided, otherwise returns a Promise resolving to a boolean.

- **`clear(callback?: (error: Error | null, success: boolean) => void)`**
  - Bot API 9.0+
  - Clears all keys previously stored by the bot in the device's local storage.
  - Returns null and a boolean indicating success if a callback is provided, otherwise returns a Promise resolving to a boolean.

- **`version(): string`**
  - Returns the version of the Bot API available in the user's Telegram app.

- **`isVersionAtLeast(version: string): boolean`**
  - Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.

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

const deviceStorage = useDeviceStorage()

// Set an item
deviceStorage.setItem('username', 'JohnDoe').then(success => {
  console.log('Item set:', success);
})

// Get an item
deviceStorage.getItem('username').then(value => {
  console.log('Username:', value);
})

// Remove an item
deviceStorage.removeItem('username').then(success => {
  console.log('Item removed:', success);
})

// Clear all items
deviceStorage.clear().then(success => {
  console.log('Storage cleared:', success);
})

// Check API version
console.log('Bot API Version:', deviceStorage.version());
console.log('Is API v9.0+?:', deviceStorage.isVersionAtLeast('9.0'));
```
```

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

### Import useWebApp Hook (TypeScript)

Source: https://vue-tg.deptyped.com/mini-apps

Imports the `useWebApp` hook from the `vue-tg` library in TypeScript. This hook provides access to Telegram Web App functionalities. It is noted as deprecated and `useMiniApp` should be used instead.

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

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

### Access Theme Information with useTheme (TypeScript)

Source: https://vue-tg.deptyped.com/mini-apps

Initializes the theme interface from vue-tg, providing access to the current color scheme and theme parameters of the Telegram app. It also allows for listening to theme changes. Requires 'vue-tg'.

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

const theme = useTheme()
```

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

### useMiniApp Hook

Source: https://vue-tg.deptyped.com/mini-apps

The `useMiniApp` hook provides access to various properties and methods for interacting with the Telegram Mini App environment. This includes retrieving initialization data, platform information, and managing app lifecycle events.

```APIDOC
## useMiniApp

### Description
A hook to access Telegram Mini App functionalities.

### Properties
- **initData** (string) - Raw data transferred to the Mini App for validation.
  **WARNING**: Validate data from this field before using it on the bot's server.
- **initDataUnsafe** (object) - Unsafe object with input data transferred to the Mini App.
  **WARNING**: Data from this field should not be trusted. You should only use data from _initData_ on the bot's server and only after it has been validated.
- **platform** (string) - The name of the platform of the user's Telegram app.
- **isActive** (boolean) - Bot API 8.0+ _True_ , if the Mini App is currently active. _False_ , if the Mini App is minimized.

### Methods
- **onActive** (function) - Bot API 8.0+ Sets an event handler for when the Mini App becomes active. An alias for `onActivated`.
- **onDeactive** (function) - Bot API 8.0+ Sets an event handler for when the Mini App is deactivated. An alias for `onDeactivated`.
- **sendData** (function) - Sends data to the bot and closes the Mini App. This method is only available for Mini Apps launched via a Keyboard button. The data can be up to 4096 bytes.
- **switchInlineQuery** (function) - Inserts the bot's username and the specified inline query in the current chat's input field. Optionally prompts the user to choose a specific chat type.
- **openLink** (function) - Opens a link in an external browser. The Mini App will not be closed. Bot API 6.4+ supports opening links in Instant View mode if `try_instant_view` option is set to true. This method can only be called in response to user interaction.
- **openTelegramLink** (function) - Opens a Telegram link inside the Telegram app. Up to Bot API 7.0, the Mini App will be closed after this method is called. After Bot API 7.0, the Mini App will not be closed.
- **openInvoice** (function) - Bot API 6.1+ Opens an invoice using the provided URL. The Mini App receives the `invoiceClosed` event when the invoice is closed. An optional callback function can be provided to handle the invoice status.
- **onInvoiceClose** (function) - Bot API 6.1+ Sets an event handler for when the invoice is closed. An alias for `onInvoiceClosed`.
- **shareToStory** (function) - Bot API 7.8+ Opens the native story editor with the specified media URL. An optional `params` argument can describe additional sharing settings.
- **shareMessage** (function) - Bot API 8.0+ Opens a dialog allowing the user to share a message provided by the bot. An optional callback function can be provided to indicate if the message was sent successfully. The message ID must belong to a PreparedInlineMessage.
- **onShareMessageSent** (function) - Bot API 8.0+ Sets an event handler for when a message is successfully shared. An alias for `onShareMessageSent`.
- **onShareMessageFail** (function) - Bot API 8.0+ Sets an event handler for when sharing a message fails. An alias for `shareMessageFailed`.
- **downloadFile** (function) - Bot API 8.0+ Displays a native popup prompting the user to download a file. An optional callback function can be provided to indicate if the user accepted the download request.
- **hideKeyboard** (function) - Bot API 9.1+ Hides the on-screen keyboard if it is currently visible.
- **onFileDownloadRequest** (function) - Bot API 8.0+ Sets an event handler for file download requests. An alias for `onFileDownloadRequested`.
- **requestWriteAccess** (function) - Bot API 6.9+ Shows a native popup requesting permission for the bot to send messages to the user. An optional callback function can be provided to indicate if the user granted access.
- **onWriteAccessRequest** (function) - Bot API 6.9+ Sets an event handler for write access requests. An alias for `onWriteAccessRequested`.
```

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

### Vue-TG: Theme Management

Source: https://vue-tg.deptyped.com/mini-apps

Provides reactive properties and methods for managing the Telegram Web App's theme. Includes `colorScheme`, `themeParams`, `headerColor`, `backgroundColor`, `setHeaderColor`, and `setBackgroundColor`. Theme properties are reactive and readonly where indicated.

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

const {
  colorScheme,
  themeParams,
  headerColor,
  backgroundColor,
  setHeaderColor,
  setBackgroundColor
} = useWebAppTheme()

// Accessing theme properties
// console.log('Color Scheme:', colorScheme.value)
// console.log('Header Color:', headerColor.value)

// Setting theme colors
// setHeaderColor('#FF0000') // Set header to red
// setBackgroundColor('secondary_bg_color') // Set background to secondary theme color
```

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

### Cloud Storage API

Source: https://vue-tg.deptyped.com/mini-apps

Methods for interacting with the Telegram Cloud Storage to store and retrieve data.

```APIDOC
## Cloud Storage API

### Description

Provides methods to store, retrieve, and remove data from Telegram's Cloud Storage.

### Methods

#### `setItem(key: string, value: string, callback?: (error: any, success: boolean) => void): Promise<[any, boolean] | void>`

*   **Description**: Stores a value in the cloud storage using the specified key.
*   **Bot API Version**: 6.9+
*   **Constraints**: Key: 1-128 characters (A-Z, a-z, 0-9, _, -). Value: 0-4096 characters. Up to 1024 keys.
*   **Returns**: A promise resolving with an error or success status if no callback is provided.

#### `getItem(key: string, callback?: (error: any, value: string) => void): Promise<[any, string] | void>`

*   **Description**: Retrieves a value from the cloud storage using the specified key.
*   **Bot API Version**: 6.9+
*   **Constraints**: Key: 1-128 characters (A-Z, a-z, 0-9, _, -).
*   **Returns**: A promise resolving with an error or the retrieved value if no callback is provided.

#### `getItems(keys: string[], callback?: (error: any, values: { [key: string]: string }) => void): Promise<[any, { [key: string]: string }] | void>`

*   **Description**: Retrieves values from the cloud storage for multiple specified keys.
*   **Bot API Version**: 6.9+
*   **Constraints**: Keys: 1-128 characters each (A-Z, a-z, 0-9, _, -).
*   **Returns**: A promise resolving with an error or an object containing key-value pairs if no callback is provided.

#### `removeItem(key: string, callback?: (error: any, success: boolean) => void): Promise<[any, boolean] | void>`

*   **Description**: Removes a value from the cloud storage using the specified key.
*   **Bot API Version**: 6.9+
*   **Constraints**: Key: 1-128 characters (A-Z, a-z, 0-9, _, -).
*   **Returns**: A promise resolving with an error or success status if no callback is provided.

#### `removeItems(keys: string[], callback?: (error: any, success: boolean) => void): Promise<[any, boolean] | void>`

*   **Description**: Removes values from the cloud storage for multiple specified keys.
*   **Bot API Version**: 6.9+
*   **Constraints**: Keys: 1-128 characters each (A-Z, a-z, 0-9, _, -).
*   **Returns**: A promise resolving with an error or success status if no callback is provided.

#### `getKeys(callback?: (error: any, keys: string[]) => void): Promise<[any, string[]] | void>`

*   **Description**: Retrieves a list of all keys currently stored in the cloud storage.
*   **Bot API Version**: 6.9+
*   **Returns**: A promise resolving with an error or an array of keys if no callback is provided.

#### `version(): string`

*   **Description**: Returns the version of the Bot API available in the user's Telegram app.

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

*   **Description**: Returns true if the user's app supports a Bot API version that is equal to or higher than the specified version.

```

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

### Use Home Screen Hook in Vue

Source: https://vue-tg.deptyped.com/mini-apps

The `useHomeScreen` hook facilitates interaction with the device's home screen features for your Mini App. It allows users to add the app to their home screen, check the status of the shortcut, and set event handlers for shortcut addition and status checking. This hook is available from Bot API 8.0+.

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

const homeScreen = useHomeScreen()
```
Tokens:
Raw