Nuxt 3

Install

npm install @behio/storefront-sdk

Plugin

Create a Nuxt plugin to initialize the client:

plugins/behio.ts

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

export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig();

  const storefront = new BehioStorefront({
    apiKey: config.public.behioApiKey,
  });

  return {
    provide: {
      behio: storefront,
    },
  };
});

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      behioApiKey: process.env.BEHIO_API_KEY || '',
    },
  },
});

Composables

Create reusable composables using the SDK client:

composables/useBehio.ts

export function useBehio() {
  const { $behio } = useNuxtApp();
  return $behio as BehioStorefront;
}

composables/useProducts.ts

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

  return useAsyncData('products', () =>
    storefront.catalog.getProducts(query)
  );
}

composables/useCart.ts

export function useCart() {
  const storefront = useBehio();

  return useAsyncData('cart', () => storefront.cart.get(), {
    server: false, // Cart is client-side only
  });
}

Product List Page

pages/products.vue

<script setup lang="ts">
const { data, pending } = useProducts({ limit: 12 });
</script>

<template>
  <div v-if="pending">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>
      <NuxtLink :to="`/products/${product.slug}`">View</NuxtLink>
    </div>
  </div>
</template>

Product Detail

pages/products/[slug].vue

<script setup lang="ts">
const route = useRoute();
const storefront = useBehio();

const { data: product } = useAsyncData(
  `product-${route.params.slug}`,
  () => storefront.catalog.getProduct(route.params.slug as string)
);

const addToCart = async () => {
  if (!product.value) return;
  await storefront.cart.addItem({ productId: product.value.id, quantity: 1 });
};
</script>

<template>
  <div v-if="product">
    <h1>{{ product.name }}</h1>
    <p>{{ product.price }} {{ product.currency }}</p>
    <p>{{ product.description }}</p>
    <button @click="addToCart">Add to Cart</button>
  </div>
</template>

Cart Page

pages/cart.vue

<script setup lang="ts">
const storefront = useBehio();
const { data: cart, refresh } = useCart();

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

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',
    },
  });
  navigateTo(`/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>

Environment Variables

.env

BEHIO_API_KEY=pk_live_your_key