@evaro/connect-vue

Native Vue 3 integration for Evaro Connect. Drop this into any Vue 3 or Nuxt app and skip the manual isCustomElement config and the SSR gymnastics that come with using the bare web component directly.

Install

pnpm add @evaro/connect-vue
# or
npm install @evaro/connect-vue

Peer dependencies: vue >= 3.4. Works under Nuxt 3 with no extra setup.

Quick start

Embed an Evaro block

Render a full landing page, a small callout, or any other Evaro-hosted block with one component:

<script setup lang="ts">
import { EvaroLanding } from '@evaro/connect-vue'
</script>

<template>
  <EvaroLanding
    vendor="03f0db937fd156141d272250a2b59f"
    template="erectile-dysfunction"
  />
</template>

The component fetches the prerendered block and renders it inside a Shadow DOM. Your Vue tree and CSS stay untouched. The CDN and analytics URLs resolve automatically — see Environments.

Add launcher buttons

For call-to-action buttons that open Connect, wrap your app with <EvaroProvider> and map your conditions:

<script setup lang="ts">
import { EvaroProvider } from '@evaro/connect-vue'

const conditions = {
  'erectile-dysfunction': '93e6e49e13c458706634eecd58423a',
  'migraine-relief':      '4f4ce914783df03cc18e793cb8bff0',
  'weight-loss':          '70198fea75871263274d8a554ed584',
}
</script>

<template>
  <EvaroProvider
    vendorHash="03f0db937fd156141d272250a2b59f"
    :conditions="conditions"
  >
    <slot />
  </EvaroProvider>
</template>

Then drop the launcher anywhere:

<script setup lang="ts">
import { EvaroConnect } from '@evaro/connect-vue'
</script>

<template>
  <EvaroConnect condition="migraine-relief" class="cta-button">
    Start free consultation
  </EvaroConnect>
</template>

Connect's iframe.js loads lazily on first click — your page bundle stays small.

Environments

You never paste a URL. The package resolves Evaro's CDN and API automatically — production by default. From your staging site, pass env="staging" on the provider or directly on a component:

<EvaroLanding vendor="…" template="…" env="staging" />
<EvaroProvider vendorHash="…" env="staging">…</EvaroProvider>

env accepts staging, prod, and the alias preview (resolves to staging) — pass VERCEL_ENV straight through. One value resolves the landings CDN, the analytics API, and the Connect launcher together.

Nuxt and SSR

The components are SSR-safe. They render an empty placeholder on the server and create the underlying web element on client mount. There is nothing to gate behind <ClientOnly> and no isCustomElement config to add.

The web element is created via document.createElement inside a Vue-managed wrapper, so no evaro-* tag ever appears in your template — Vue's compiler never warns about an unknown element.

<EvaroProvider> props

| Prop | Type | Notes | |---|---|---| | vendorHash | string (required) | Your Evaro vendor hash (32 hex). One value per app. | | conditions | Record<string, string \| ConditionMapping> | Optional. Lookup table for <EvaroConnect condition="...">. Values can be a bare questionnaire hash, a full link, or an object with questionnaireId, productId, or link. | | env | 'staging' \| 'preview' \| 'prod' | Optional. Evaro environment; resolves the CDN + API URLs. Default prod. Inherited by nested components. | | apiBase | string | Optional. Explicit API base URL — advanced override, prefer env. |

<EvaroLanding> props

| Prop | Type | Notes | |---|---|---| | template | string (required) | Landing template slug. | | vendor | string | Vendor hash. Required unless inherited from <EvaroProvider>. | | category | string | Optional. Category slug for a shared, category-driven template. A category Evaro has not published renders nothing. | | env | 'staging' \| 'preview' \| 'prod' | Optional. See Environments. Inherited from the provider; default prod. | | cdn / apiBase | string | Optional explicit URL overrides — advanced, prefer env. |

Events: ready when the manifest renders, load-error if the fetch fails.

<EvaroConnect> props

| Prop | Type | Notes | |---|---|---| | link | string | Direct link, e.g. abc/product/p1. Takes precedence over category and condition. | | condition | string | Looks up the link from <EvaroProvider :conditions="{...}">. | | vendor | string | Vendor hash. Required for category; otherwise inherited from <EvaroProvider>. | | category | string | Category slug, resolved against the vendor's Evaro-hosted category map. A category Evaro has not published renders nothing. | | cdn | string | Explicit CDN origin for the category map. Advanced override — prefer env. | | patient | { state?: object } | Prefill data merged into Connect's localStorage before opening. | | env | 'staging' \| 'preview' \| 'prod' | Optional. Inherited from <EvaroProvider>; default prod. | | disabled | boolean | Standard disabled behavior. |

Events: open(link, event) fires before the open call, error(err) fires when the lazy-load or open fails.

Composables

useEvaroAnalytics(handler)

Subscribe to Connect's analytics events. The handler fires for every EVARO_ANALYTIC_EVENT dispatched by the iframe.

<script setup lang="ts">
import { useEvaroAnalytics } from '@evaro/connect-vue'

useEvaroAnalytics(({ event, data }) => {
  if (event === 'evaro_purchase') {
    yourAnalytics.track('partner.conversion', data)
  }
})
</script>

The handler is captured at setup time; pass a stable reference (a method, not an inline function recreated on every render).

useEvaroState()

Returns a reactive ref of { cart, user } derived from Connect's localStorage. Reads window.evaro_state on mount and updates from EVARO_STATE_UPDATE events.

<script setup lang="ts">
import { useEvaroState } from '@evaro/connect-vue'

const state = useEvaroState()
</script>

<template>
  <span v-if="state.user">Welcome back</span>
  <SignIn v-else />
</template>

Analytics

The Evaro API is the source of truth for analytics config. The provider loads /json/api/v1/vendor/{vendor}/gtm-snippet and /json/api/v1/vendor/{vendor}/event-handler on mount; both endpoints return empty strings when the vendor has no google_tag_manager_id configured. No GTM ID on the Vue side.

If your site has its own GTM container, it sits alongside Evaro's on the same window.dataLayer. Evaro event names are namespaced (page_view_dlv, the Evaro ecommerce names) so your container can filter them with exclusion rules if needed. To forward Evaro events to a different analytics system, use useEvaroAnalytics().

TypeScript

Full types are exported. See dist/index.d.ts after install.