> ## Documentation Index
> Fetch the complete documentation index at: https://docs.timeback.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue

> Client-side Vue integration with Timeback

## Overview

The Timeback SDK provides Vue composables, components, and a provider for client-side integration.

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @timeback/sdk
  ```

  ```bash pnpm theme={null}
  pnpm add @timeback/sdk
  ```

  ```bash yarn theme={null}
  yarn add @timeback/sdk
  ```

  ```bash bun theme={null}
  bun add @timeback/sdk
  ```
</CodeGroup>

## Provider Setup

Wrap your app with `TimebackProvider`:

```vue app.vue theme={null}
<script setup>
import { TimebackProvider } from '@timeback/sdk/vue'
</script>

<template>
  <TimebackProvider>
    <NuxtPage />
  </TimebackProvider>
</template>
```

## Composables

### `useTimeback`

Access the Timeback client:

```vue theme={null}
<script setup>
import { useTimeback } from '@timeback/sdk/vue'

const timeback = useTimeback()
</script>

<template>
  <div v-if="!timeback">Please sign in</div>
  <div v-else>Welcome!</div>
</template>
```

### `useTimebackVerification`

Check authentication status:

```vue theme={null}
<script setup>
import { useTimebackVerification } from '@timeback/sdk/vue'

const { state, refresh } = useTimebackVerification()
</script>

<template>
  <div v-if="state.status === 'loading'">Loading...</div>
  <div v-else-if="state.status !== 'verified'">Please sign in</div>
  <slot v-else />
</template>
```

The `state` ref has a `status` property that can be:

* `'loading'` - Verification in progress
* `'verified'` - User is verified (includes `timebackId`)
* `'unverified'` - User is not verified
* `'error'` - Verification failed (includes `message`)

### `useTimebackProfile`

Fetch user profile data:

```vue theme={null}
<script setup>
import { useTimebackProfile } from '@timeback/sdk/vue'

const { state, canFetch, fetchProfile } = useTimebackProfile()
</script>

<template>
  <div v-if="state.status === 'loaded'">
    <p>Welcome, {{ state.profile.name }}</p>
    <p>XP Today: {{ state.profile.xp.today }}</p>
    <p>Total XP: {{ state.profile.xp.all }}</p>
  </div>
  <button v-else @click="fetchProfile" :disabled="!canFetch">
    {{ state.status === 'loading' ? 'Loading...' : 'Load Profile' }}
  </button>
</template>
```

## Components

### `SignInButton`

Pre-built sign-in button:

```vue theme={null}
<script setup>
import { SignInButton } from '@timeback/sdk/vue'
</script>

<template>
  <div>
    <h1>Welcome</h1>
    <SignInButton size="lg">Sign in with Timeback</SignInButton>
  </div>
</template>
```

#### Props

<ParamField body="size" type="'sm' | 'md' | 'lg'" default="'md'">
  Button size
</ParamField>

<ParamField body="variant" type="'default' | 'outline'" default="'default'">
  Button style variant
</ParamField>

<ParamField body="showLoading" type="boolean" default="true">
  Show loading spinner on click
</ParamField>

<ParamField body="showLogo" type="boolean" default="true">
  Show Timeback logo
</ParamField>

<ParamField body="disabled" type="boolean" default="false">
  Disable the button
</ParamField>

## Custom Activities

The SDK supports two [activity models](/beta/about-timeback/concepts/activity-models) that capture how students spend time in your app and whether they complete what they started, producing [TimeSpentEvents](/beta/build-on-timeback/reference/events#timespentevent) and [ActivityCompletedEvents](/beta/build-on-timeback/reference/events#activitycompletedevent) that feed into dashboards, XP, and learning analytics.

### Single-session

A quiz, flashcard deck, or short lesson that a student completes in one sitting. The client tracks time and reports completion. Learn more about [single-session activities](/beta/build-on-timeback/sdk/activity-tracking/single-session).

### Stateful

A multi-part course or long-form project where students leave and come back across multiple sessions. The client tracks time per visit while the server records completion. Learn more about [stateful activities](/beta/build-on-timeback/sdk/activity-tracking/stateful).

## Next Steps

<CardGroup cols={2}>
  <Card title="Nuxt Server" href="/beta/build-on-timeback/sdk/server/nuxt">
    Server-side setup
  </Card>

  <Card title="Custom Activities" href="/beta/build-on-timeback/sdk/activity-tracking/intro">
    Learn more about tracking
  </Card>
</CardGroup>