Skip to main content

Vendure Integration

Vendure is the commerce platform we pair with the Haus Storefront SDK by default. Its GraphQL-first architecture and multi-channel capabilities align with the abstractions delivered through our npm packages, so you can get a production-ready storefront with minimal setup.

Why Vendure Is Our Default​

Vendure aligns with the SDK’s architecture and delivers a production-ready foundation out of the box:

  • GraphQL-first API that matches our TypeScript contracts.
  • Multi-channel support for branded storefronts and marketplace scenarios.
  • Plugin ecosystem that covers payments, search, and custom workflows.

While Vendure is the default, the SDK is intentionally provider-agnostic. When a project calls for a different commerce engine, we work with you to deliver a new provider that implements the same interface and can be swapped in via configuration.

What You Configure​

  • Endpoints: Provide your Vendure Shop API URL (and Admin API if needed) via the options object when you initialize DataProvider.
  • Channel token: Each storefront channel in Vendure has a token. Supply it to the SDK so we can scope queries to the correct channel.
  • Client behaviour: Control caching, persistence, and platform flags through the SDK options available in the published package.

What Haus Tech Handles​

  • Channel & plugin setup: We configure Vendure channels, taxes, and essential plugins so the SDK can connect securely.
  • Advanced workflows: If you require bespoke promotions, checkout flows, or third-party integrations, we implement those extensions for you.
  • Backend alignment: We help instrument your Vendure instance (channels, tokens, plugins) so the SDK can connect securely and efficiently.
  • Ongoing maintenance: We keep the Vendure provider inside the SDK up to date with API evolutions and performance improvements.

Example Configuration​

import { DataProvider } from "@haus-storefront-react/core";

function App() {
  return (
    <DataProvider
      provider='vendure'
      platform='web'
      options={{
        apiUrl: "https://your-vendure-api.com/shop-api",
        vendureToken: "YOUR_CHANNEL_TOKEN",
        persistOptions: {
          enabled: false,
        },
      }}
    >
      <YourApplication />
    </DataProvider>
  );
}

Looking Beyond Vendure​

Want to integrate another commerce platform? Let us know. We can build a dedicated provider that plugs into the same SDK surface area so your frontend code stays unchanged.

Last updated on