Nuxt.js

npm install @heychocolate/nuxt

export default defineNuxtConfig({
  modules: ['@heychocolate/nuxt'],
  heychocolate: {
    apiKey: process.env.HEYCHOCOLATE_API_KEY,
  },
});

<script setup>
const { data: product, pending } = await useProduct('prod_abc123');
</script>

<template>
  <div v-if="!pending">
    <h1>{{ product.name }}</h1>
    <p>CO2: {{ product.impactScore.co2Equivalent }} kg CO2e</p>
  </div>
</template>

<script setup>
const { calculate, result, pending } = useImpactCalculation();

async function onCalculate() {
  await calculate({
    productId: 'prod_abc123',
    quantity: 100,
    transportMethod: 'TRUCK',
  });
}
</script>

<template>
  <button @click="onCalculate" :disabled="pending">Calculate</button>
  <p v-if="result">{{ result.equivalency.description }}: {{ result.equivalency.value }}</p>
</template>

<script setup>
const { cartImpact, pending } = useCartImpact({
  sessionId: 'session_abc',
  items: cartItems,
  shippingAddress: { country: 'NL' },
});
</script>

<template>
  <div v-if="!pending">
    <p>Cart footprint: {{ cartImpact.totalCo2Equivalent }} kg CO2e</p>
    <p>{{ cartImpact.equivalency.description }}: {{ cartImpact.equivalency.value }}</p>
  </div>
</template>

// server/api/product-impact.ts
import { useHeyChocolateServer } from '@heychocolate/nuxt/server';

export default defineEventHandler(async (event) => {
  const client = useHeyChocolateServer();
  const productId = getQuery(event).id as string;

  const impact = await client.calculations.impact({
    productId,
    quantity: 1,
  });

  return impact;
});

<template>
  <HcCarbonBadge product-id="prod_abc123" variant="detailed" />
  <HcComparisonTable :product-ids="['prod_abc123', 'prod_def456']" />
  <HcSupplyChainViewer product-id="prod_abc123" />
</template>

HEYCHOCOLATE_API_KEY=sk_live_your_key
NUXT_PUBLIC_HEYCHOCOLATE_API_KEY=sk_live_readonly_key