# @lia-labs/sdk-vue

> Vue 3 composables for the Lia SDK. Lia's state as read-only refs, and buttons driven by refs or getters. From the Lia developer docs: https://docs.lialabs.org/packages/vue

```sh
npm install @lia-labs/sdk @lia-labs/sdk-vue
```

Vue 3.3 or later. Everything from [`@lia-labs/sdk`](/packages/sdk) is re-exported. Each composable stops listening when its component (or effect scope) goes away.

## An app

```vue
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { isLia, mockLia, pay, ready, useBackButton, useClosingConfirmation, useInit, useLanguage, useMainButton } from '@lia-labs/sdk-vue';

if (!isLia()) mockLia();

const lia = useInit();
const language = useLanguage();
const playing = ref(false);

watch(lia.status, (status) => status === 'ready' && ready());
useMainButton(() => !playing.value && { text: 'Buy extra lives', onClick: () => pay('extra-lives') });
useBackButton(computed(() => (playing.value ? () => (playing.value = false) : null)));
useClosingConfirmation(playing);
</script>

<template>
  <h1 v-if="lia.status.value === 'ready'">Hello, @{{ lia.result.value?.player.name }} ({{ language }})</h1>
</template>
```

## Composables

| Composable | Gives you |
| --- | --- |
| `useInit(options?)` | `{ status, result, error }` as refs. Calls `init()` once. |
| `useSignal(value)` | Any SDK value as a read-only ref. |
| `usePlayer()`, `useMode()`, `useLanguage()`, `useRtl()`, `useColorScheme()`, `useThemeParams()`, `useViewport()`, `useSafeArea()`, `useContentSafeArea()`, `useIsFullscreen()`, `useStartParam()`, `useSoundOn()`, `useNotificationsAllowed()` | Lia's state as read-only refs. |
| `useLiaEvent(event, handler)` | Listens to one of Lia's events. |
| `useMainButton(options)`, `useSecondaryButton(options)` | Shows the button. `options` can be an object, a ref or a getter, and the button follows it; `null` or `false` hides it. |
| `useBackButton(onBack)`, `useSettingsButton(onOpen)` | Shows the header button. Pass a function, or a ref to one (`null` hides it). |
| `useClosingConfirmation(enabled?)`, `useVerticalSwipesDisabled(disabled?)` | `enabled` can be a boolean, a ref or a getter. |

> **Note** Header buttons take a function or a ref, never a getter: a handler is a function itself, so a getter would be mistaken for it.