Skip to main content

​
Overview

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

​
Installation

npm install @timeback/sdk

​
Provider Setup

Wrap your app with TimebackProvider:
app.vue
<script setup>
import { TimebackProvider } from '@timeback/sdk/vue'
</script>

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

​
Composables

​
useTimeback

Access the Timeback client: 
<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: 
<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: 
<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: 
<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

​
size
'sm' | 'md' | 'lg'
default:"'md'"
Button size
​
variant
'default' | 'outline'
default:"'default'"
Button style variant
​
showLoading
boolean
default:"true"
Show loading spinner on click
Show Timeback logo
​
disabled
boolean
default:"false"
Disable the button

​
Custom Activities

The SDK supports two activity models that capture how students spend time in your app and whether they complete what they started, producing TimeSpentEvents and ActivityCompletedEvents 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.

​
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.

​
Next Steps

Nuxt Server

Server-side setup

Custom Activities

Learn more about tracking