Vue Guide

// src/lib/sazito.ts
import { products, cart, users } from '@sazito/client-sdk';

const config = {
  domain: import.meta.env.VITE_SAZITO_DOMAIN,
  timeout: 20000,
};

export const productsApi = products(config);
export const cartApi = cart(config);
export const usersApi = users(config);

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import type { Product } from '@sazito/client-sdk';
import { productsApi } from '@/lib/sazito';

const items = ref<Product[]>([]);
const loading = ref(true);
const error = ref<string | null>(null);

onMounted(async () => {
  const res = await productsApi.list({ page: 1, pageSize: 12, sort: 'newest' });

  if (res.error) {
    error.value = res.error.message;
  } else {
    items.value = res.data?.items ?? [];
  }

  loading.value = false;
});
</script>

<template>
  <p v-if="loading">Loading...</p>
  <p v-else-if="error">{{ error }}</p>
  <ul v-else>
    <li v-for="item in items" :key="item.url">{{ item.name }}</li>
  </ul>
</template>

import { cartApi } from '@/lib/sazito';

const addRes = await cartApi.addItem(12345, 1);
if (addRes.error) {
  console.error(addRes.error.message);
}