SlugInput

@vendure/dashboard Source

A component for generating and displaying slugs based on a watched field. The component watches a source field for changes, debounces the input, and generates a unique slug via the Admin API. The slug is only auto-generated when it's empty. For existing slugs, a regenerate button allows manual regeneration. The input is readonly by default but can be made editable with a toggle button.

Example

Tsx

// In a TranslatableFormFieldWrapper context with translatable field<SlugInput    {...field}    entityName="Product"    fieldName="slug"    watchFieldName="name" // Automatically resolves to "translations.X.name"    entityId={productId}/>// In a TranslatableFormFieldWrapper context with non-translatable field<SlugInput    {...field}    entityName="Product"    fieldName="slug"    watchFieldName="enabled" // Uses "enabled" directly (base entity field)    entityId={productId}/>// For non-translatable entities<SlugInput    {...field}    entityName="Channel"    fieldName="code"    watchFieldName="name" // Uses "name" directly    entityId={channelId}/>

Signature

function SlugInput(props: SlugInputProps): void

Parameters

props

parameterSlugInputProps