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:
<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>
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
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
Show loading spinner on click
Activity Tracking
Track learning activities:
<script setup>
import { onMounted, onUnmounted } from 'vue'
import { useTimeback } from '@timeback/sdk/vue'
const props = defineProps(['lessonId', 'lessonName'])
const timeback = useTimeback()
let activity
onMounted(() => {
if (timeback.value) {
activity = timeback.value.activity.start({
id: props.lessonId,
name: props.lessonName,
course: { subject: 'Math', grade: 3 },
})
}
})
onUnmounted(() => {
activity?.end({
totalQuestions: 10,
correctQuestions: 8,
xpEarned: 80,
})
})
</script>
<template>
<div>Lesson content...</div>
</template>
Next Steps
