Vue Integration

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Encore from '@encorekit/web-sdk';

const isInitialized = ref(false);
const userId = ref('');
const status = ref<{
  message: string;
  type: 'info' | 'success' | 'error';
} | null>(null);

// Initialize SDK on mount
onMounted(() => {
  try {
    // Generate or retrieve userId from localStorage
    const storageKey = 'encore_user_id';
    let storedUserId = localStorage.getItem(storageKey);
    
    if (!storedUserId) {
      storedUserId = 'user_' + Math.random().toString(36).substring(2, 15);
      localStorage.setItem(storageKey, storedUserId);
    }
    
    Encore.configure({
      apiKey: import.meta.env.VITE_ENCORE_API_KEY || 'YOUR_API_KEY',
      userId: storedUserId,
      environment: 'production',
      logLevel: 'debug',
    });
    
    const currentUserId = Encore.getCurrentUserId();
    userId.value = currentUserId || '';
    isInitialized.value = true;
    status.value = {
      message: 'Encore SDK initialized successfully!',
      type: 'success',
    };
  } catch (error) {
    status.value = {
      message: `Failed to initialize SDK: ${error instanceof Error ? error.message : 'Unknown error'}`,
      type: 'error',
    };
  }
});

function handleIdentifyUser(newUserId: string) {
  try {
    Encore.identify(newUserId, {
      email: 'user@example.com',
      subscriptionTier: 'free'
    });
    userId.value = newUserId;
    status.value = {
      message: `User identified as: ${newUserId}`,
      type: 'success',
    };
  } catch (error) {
    status.value = {
      message: `Failed to identify user: ${error instanceof Error ? error.message : 'Unknown error'}`,
      type: 'error',
    };
  }
}

async function handlePresentOffer() {
  status.value = {
    message: 'Presenting offer...',
    type: 'info',
  };

  try {
    const result = await Encore.presentOffer();
    
    if (result.granted) {
      status.value = {
        message: 'Offer granted successfully!',
        type: 'success',
      };
    } else {
      status.value = {
        message: 'Offer not granted',
        type: 'info',
      };
    }
  } catch (error) {
    status.value = {
      message: `Failed to present offer: ${error instanceof Error ? error.message : 'Unknown error'}`,
      type: 'error',
    };
  }
}
</script>

<template>
  <div>
    <h1>Encore SDK - Vue</h1>
    <p>Status: {{ isInitialized ? '✓ Initialized' : '✗ Not Initialized' }}</p>
    <p>User ID: {{ userId || 'Not set' }}</p>
    
    <div v-if="status" :class="`status-${status.type}`">
      {{ status.message }}
    </div>
    
    <button @click="handlePresentOffer" :disabled="!isInitialized">
      🎁 Present Offer
    </button>
  </div>
</template>

import { ref, onMounted } from 'vue';
import Encore from '@encorekit/web-sdk';

export function useEncore(apiKey: string) {
  const isInitialized = ref(false);
  const userId = ref('');

  onMounted(() => {
    const storageKey = 'encore_user_id';
    let storedUserId = localStorage.getItem(storageKey);
    
    if (!storedUserId) {
      storedUserId = 'user_' + Math.random().toString(36).substring(2, 15);
      localStorage.setItem(storageKey, storedUserId);
    }

    Encore.configure({
      apiKey,
      userId: storedUserId,
      environment: 'production',
    });

    userId.value = storedUserId;
    isInitialized.value = true;
  });

  return { isInitialized, userId };
}