@opendoor/partner-sdk-client-vue

Vue 3 components for Opendoor partner integrations. Address entry, map display, unit confirmation, and DTC onboarding flow with theming support.

Install

npm install @opendoor/partner-sdk-client-vue @opendoor/partner-sdk-client-js-core

Import the CSS in your app entry point:

import '@opendoor/partner-sdk-client-vue/dist/style.css';

Quick start

<script setup lang="ts">
import {
  OpendoorProvider,
  AddressEntry,
  DtcOnboardingFlow,
  OpendoorClient,
} from '@opendoor/partner-sdk-client-vue';
import type { Address } from '@opendoor/partner-sdk-client-js-core';
import { ref } from 'vue';

const client = new OpendoorClient({ baseURL: '/api/opendoor/v1' });
const address = ref<Address | null>(null);

async function handleSelect(addr: Address) {
  address.value = addr;
  // create offer, then show DtcOnboardingFlow
}
</script>

<template>
  <OpendoorProvider :client="client">
    <AddressEntry @address-select="handleSelect" />
    <!-- After offer created: -->
    <DtcOnboardingFlow
      v-if="address"
      :address="address"
      @submit="
        (answers) => {
          /* submit answers */
        }
      "
    />
  </OpendoorProvider>
</template>

Components

• OpendoorProvider — provide/inject wrapper for the SDK client
• AddressEntry — address autocomplete with manual entry fallback
• AddressMap — static map display via Mapbox geocoding
• AddressUnitConfirmation — unit/apt number collection
• DtcOnboardingFlow — 17-page DTC onboarding questionnaire

Documentation

Full guides, API reference, and examples: https://partner-sdk.opendoor.com