Vue + Vite

npm install @behio/storefront-sdk

import { BehioStorefront } from '@behio/storefront-sdk';

export const storefront = new BehioStorefront({
  apiKey: import.meta.env.VITE_BEHIO_API_KEY,
});

import { createApp } from 'vue';
import App from './App.vue';
import { storefront } from './lib/behio';

const app = createApp(App);
app.provide('behio', storefront);
app.mount('#app');

import { inject } from 'vue';
import type { BehioStorefront } from '@behio/storefront-sdk';

export function useBehio() {
  return inject('behio') as BehioStorefront;
}

import { ref, onMounted } from 'vue';
import { useBehio } from './useBehio';

export function useProducts(query?: Record<string, unknown>) {
  const storefront = useBehio();
  const data = ref(null);
  const loading = ref(true);

  onMounted(async () => {
    data.value = await storefront.catalog.getProducts(query);
    loading.value = false;
  });

  return { data, loading };
}

<script setup lang="ts">
import { useProducts } from '@/composables/useProducts';

const { data, loading } = useProducts({ limit: 12 });
</script>

<template>
  <div v-if="loading">Loading...</div>
  <div v-else class="grid grid-cols-3 gap-4">
    <div v-for="product in data?.items" :key="product.id">
      <img :src="product.image" :alt="product.name" />
      <h3>{{ product.name }}</h3>
      <p>{{ product.price }} {{ product.currency }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useBehio } from '@/composables/useBehio';

const props = defineProps<{ productId: string }>();
const storefront = useBehio();
const loading = ref(false);

const addToCart = async () => {
  loading.value = true;
  await storefront.cart.addItem({ productId: props.productId, quantity: 1 });
  loading.value = false;
};
</script>

<template>
  <button @click="addToCart" :disabled="loading">
    {{ loading ? 'Adding...' : 'Add to Cart' }}
  </button>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useBehio } from '@/composables/useBehio';
import { useRouter } from 'vue-router';

const storefront = useBehio();
const router = useRouter();
const cart = ref(null);

onMounted(async () => {
  cart.value = await storefront.cart.get();
});

const removeItem = async (itemId: string) => {
  cart.value = await storefront.cart.removeItem(itemId);
};

const checkout = async () => {
  const order = await storefront.checkout.createOrder({
    email: '[email protected]',
    shippingAddress: {
      firstName: 'Jan',
      lastName: 'Novak',
      street: 'Vodickova 12',
      city: 'Praha',
      zip: '11000',
      country: 'CZ',
    },
  });
  router.push(`/thank-you?order=${order.orderNumber}`);
};
</script>

<template>
  <div v-if="cart">
    <div v-for="item in cart.items" :key="item.id">
      <span>{{ item.productName }} x{{ item.quantity }}</span>
      <button @click="removeItem(item.id)">Remove</button>
    </div>
    <p>Total: {{ cart.grandTotal }} {{ cart.currency }}</p>
    <button @click="checkout">Checkout</button>
  </div>
</template>

VITE_BEHIO_API_KEY=pk_live_your_key