Skip to main content

format

Description​

Optional. Controls how the message content is rendered in the comments widget

Usage​

format?: "text" | "markdown" | Component<{
    content: string;
}>;

Parameters​

  • "text" (default) - renders the message content as plain text

  • "markdown" - renders the message content using Markdown syntax

  • Component - a custom Vue component that receives the message content through the content prop which is a string

Examples​

Rendering message's content as text​

<script setup>
  import { Comments } from '@svar-ui/vue-comments';

  const value = [
    {
      id: "1",
      content: "Hello, world!",
      author:{ id: 1, name: "John Doe" },
      date: new Date(),
    },
  ];
</script>

<template>
  <Comments :value="value" format="text" />
</template>

Rendering message's content in markdown format​

<script setup>
  import { Comments } from '@svar-ui/vue-comments';

  const value = [
    {
      id: "1",
      content: "Hello, **world**",
      author:{ id: 1, name: "John Doe" },
      date: new Date(),
    },
  ];
</script>

<template>
  <Comments :value="value" format="markdown" />
</template>

Rendering message's content in custom format​

<script setup>
  import { Comments } from '@svar-ui/vue-comments';

  const value = [
    {
      id: "1",
      content: "Hello @[John](user:1), check this link: {link|https://example.com|Click here}",
      date: new Date()
    }
  ];

  // Custom formatter that handles @mentions and custom link syntax
  const customFormat = (text) => {
    // Convert @mentions: @[Name](user:id) -> <a href="/users/id">Name</a>
    return text.replace(/@\[(.*?)\]\(user:(\d+)\)/g,
      '<a href="/users/$2">$1</a>');
  };

</script>

<template>
  <Comments :value="value" :format="customFormat" />
</template>