Vue components

@askdialog/dialog-vue ships ready-made components on top of @askdialog/dialog-sdk. Use it when you want a fast, themed UI in a Vue 3 app without building it from scratch.

Requires Vue 3.

Install

npm install @askdialog/dialog-sdk @askdialog/dialog-vue

Import the stylesheet once at the entry of your app:

import '@askdialog/dialog-vue/style.css'

Initialize the SDK client

Instantiate the SDK once (typically in a top-level component or composable), then pass it to each component.

<script setup lang="ts">
import { Dialog, type SimplifiedProduct } from '@askdialog/dialog-sdk'

const client = new Dialog({
  apiKey: 'YOUR_PUBLIC_API_KEY',
  locale: 'en',
  currency: 'USD',
  callbacks: {
    addToCart: async ({ productId, quantity, variantId }) => {
      // Hit your cart API, refresh your UI
    },
    getProduct: async (productId, variantId): Promise<SimplifiedProduct> => {
      // Return your product in SimplifiedProduct shape
    },
  },
})
</script>

See the SDK reference for all constructor options.

DialogProductBlock

The headline component. Drop it on a product page to render AI-generated question suggestions and the assistant entry point.

<script setup lang="ts">
import { DialogProductBlock } from '@askdialog/dialog-vue'

defineProps<{ product: { id: string; title: string; currentVariantId?: string } }>()
</script>

<template>
  <DialogProductBlock
    :client="client"
    :product-id="product.id"
    :product-title="product.title"
    :selected-variant-id="product.currentVariantId"
  />
</template>

Props

Prop	Type	Required	Default	Description
client	Dialog	Yes	-	SDK instance from new Dialog(...).
productId	string	Yes	-	The current product’s ID. Must match the ID in your catalog.
productTitle	string	Yes	-	Display name for the product.
selectedVariantId	string	No	-	The currently selected variant (size, color, etc.). Pass it whenever the user changes variant so the assistant has context.
enableInput	boolean	No	true	Show the input field under the suggestions. Set to false if you want suggestions only.

DialogInput

A standalone input field for asking a free-form question. Useful as an entry point on pages without a single product context (homepage, blog, collection).

<template>
  <DialogInput
    :client="client"
    product-id="homepage"
    product-title="Homepage"
  />
</template>

Props

Prop	Type	Required	Description
client	Dialog	Yes	SDK instance.
productId	string	Yes	A stable identifier for the context (e.g. "homepage", "collection-summer").
productTitle	string	Yes	A human-readable label for the context.

Storefront search

Ready-made components that power Dialog’s product search on a custom or headless Vue storefront, the same Search behind the Shopify blocks. They wrap the SDK search controller (createSearchController): debounce, request cancellation, stale-response protection, pagination and search attribution analytics all come from the SDK, so the components only render and route.

<script setup lang="ts">
import {
  DialogSearchBar,
  DialogSearchResults,
  useDialogSearch,
} from '@askdialog/dialog-vue'

const { controller, state, theme } = useDialogSearch({
  client,
  language: 'en',
  currency: client.currency,
})
</script>

<template>
  <DialogSearchBar :controller="controller" placeholder="Search products..." />
  <DialogSearchResults :controller="controller" :state="state" :theme="theme" />
</template>

useDialogSearch

Creates one search controller per composable instance and disposes it on unmount. Returns { controller, state, theme } (theme is the client’s theme, for DialogSearchResults): pass them to the components below. state is a ShallowRef; state.value.status is idle / loading / success / empty / error.

Option	Type	Required	Default	Description
client	Dialog	Yes	-	SDK instance.
language	string	Yes	-	Lowercase ISO 639-1 language code of the search, e.g. 'en'.
currency	string	Yes	-	ISO 4217 currency of the search, e.g. client.currency.
surface	SearchSurface	No	'search_page'	Where results are displayed, for analytics.
navigate	(url, hit) => void	No	-	Router adapter called after selection attribution (e.g. (url) => router.push(url)). Omit it to let the cards’ <a href> links navigate natively.
debounceMs	number	No	250	Keystroke debounce.
hitsPerPage	number	No	12	Results per page.
sections	SearchSection[]	No	-	Extra indices searched alongside the products, e.g. [{ index: 'collections', hitsPerPage: 5 }] fills the collections column. Only request an index the catalog exposes: a missing one fails the whole search.

DialogSearchBar

Search input: typing runs a debounced search, submitting (Enter) searches immediately.

Prop	Type	Required	Default	Description
controller	SearchController	Yes	-	From useDialogSearch.
placeholder	string	No	'Search products...'	Input placeholder text.
autoFocus	boolean	No	false	Focus the input on mount.
submitAriaLabel	string	No	'Search'	Accessible label of the submit button.

DialogSearchResults

Floating results panel portaled to document.body, centered on the bar (up to 1440px wide, filling the viewport): place it right after DialogSearchBar. It shows the same layout as the Shopify search overlay: a collections column on the left when sections requests them, the products on the right as a list or a 3-column grid, the query match emphasized in every title, and either a “See all results” button or the pagination controls. Below 768px the panel stacks, collections in a horizontal rail above the products. Colors, radii and font follow the SDK theme (dark palette when backgroundColor is dark, straight or rounded corners from ctaBorderType). Each card links to the product page and records search attribution (impressions, select on click and middle-click) automatically.

Prop	Type	Required	Description
controller	SearchController	Yes	From useDialogSearch.
state	SearchControllerState	Yes	From useDialogSearch.
locale	string	No	BCP 47 locale for prices, counts and labels (English labels and browser number format when omitted).
theme	Theme	No	The client’s theme, as returned by useDialogSearch; styles the panel (palette, radii, font).
layout	'list' | 'grid'	No	Products layout.
seeAllHref	(query: string) => string	No	Link of the “See all results” footer button; omitted, the panel paginates instead.

DialogSearchPagination is rendered by DialogSearchResults and is also exported for custom layouts (same controller + state props).

Typical layout

A common setup:

• <DialogInput> on the homepage as a discovery entry point.
• <DialogProductBlock> on every PDP, between the gallery and the description.
• A watcher on the variant selector that updates the selectedVariantId prop.

Theming

The components inherit the theme passed to the SDK constructor. Update brand colors, fonts, CTA shape, and component-specific font sizes:

const client = new Dialog({
  apiKey: 'YOUR_PUBLIC_API_KEY',
  locale: 'en',
  currency: 'USD',
  theme: {
    backgroundColor: '#ffffff',
    primaryColor: '#000000',
    ctaTextColor: '#ffffff',
    ctaBorderType: 'rounded',
    capitalizeCtas: false,
    fontFamily: 'Inter, sans-serif',
    title: { fontSize: '18px', color: '#1a1a1a' },
    description: { fontSize: '14px', color: '#666666' },
    content: { fontSize: '14px', color: '#333333' },
  },
  callbacks: { /* ... */ },
})

Next steps

• SDK reference: full API for client.
• Tracking: SDK custom: wire side-cart and checkout tracking.
• Add-to-cart issues: keeping your UI in sync.