Skip to content

Function: getStringOrVNodeAsString()

ts
function getStringOrVNodeAsString(
  input:
    | string
    | VNode<
        RendererNode,
        RendererElement,
        {
          [key: string]: any;
        }
      >,
): string;

Converts a string or VNode to a plain string representation. This utility is essential for handling mixed content types where both plain text and rich VNode content need to be converted to string format for contexts that only accept text (like HTML attributes, tooltips, accessibility labels, etc.).

The function provides a safe and comprehensive way to extract meaningful text content from Vue's VNode structures while maintaining backwards compatibility with simple string inputs.

Parameters

ParameterTypeDescription
input| string | VNode<RendererNode, RendererElement, { [key: string]: any; }>Either a plain string or a Vue VNode to convert

Returns

string

A plain string representation of the input content

Example

typescript
// String input - returned as-is
getStringOrVNodeAsString("Hello World"); // 'Hello World'

// VNode with text content
const textNode = h("span", "Hello VNode");
getStringOrVNodeAsString(textNode); // 'Hello VNode'

// Complex VNode with nested content
const complexNode = h("div", [
  h("span", "Name: "),
  h("strong", "John Doe"),
  h("span", " (Admin)"),
]);
getStringOrVNodeAsString(complexNode); // 'Name: John Doe (Admin)'

// Usage in component context for title attributes
const result = props.stringifier(item); // Could be string or VNode
h(
  "span",
  {
    title: getStringOrVNodeAsString(result), // Always string for HTML attribute
  },
  result,
); // Rich content rendered here