Vue

pnpm add @ciph/vue @ciph/core

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { CiphPlugin } from '@ciph/vue'

const app = createApp(App)

app.use(CiphPlugin, {
  baseURL: import.meta.env.VITE_API_URL,
  serverPublicKey: import.meta.env.VITE_CIPH_SERVER_PUBLIC_KEY,
})

app.mount('#app')

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useCiph } from '@ciph/vue'

const ciph = useCiph()
const users = ref([])
const loading = ref(true)

onMounted(async () => {
  const res = await ciph.get('/api/users')
  users.value = res.data
  loading.value = false
})
</script>

<template>
  <div v-if="loading">Loading...</div>
  <ul v-else>
    <li v-for="user in users" :key="user.id">{{ user.name }}</li>
  </ul>
</template>

const ciph = useCiph()

async function createUser(name: string) {
  const response = await ciph.post('/api/users', { name })
  // response.data is automatically decrypted
  return response.data
}

async function updateUser(id: string, updates: Partial<User>) {
  await ciph.patch(`/api/users/${id}`, updates)
}

try {
  const data = await ciph.post('/api/login', credentials)
} catch (error) {
  // CIPH003: Device changed (auto-retried, rare)
  // CIPH002: Wrong key (config error)
  // CIPH004: Corrupted response
  if (error.response?.status === 401) {
    console.error('Unauthorized:', error.response.data.code)
  }
}

app.use(CiphPlugin, {
  baseURL: import.meta.env.VITE_API_URL,
  serverPublicKey: import.meta.env.VITE_CIPH_SERVER_PUBLIC_KEY,
  devtools: {
    defaultOpen: true,
    position: 'bottom-right', // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'bottom' | 'top' | 'left' | 'right'
    maxLogs: 500,
  },
})