Blog Single

VBlogContent

The VBlogContent component is a Vue 3 component that displays the content of a blog post, including the title, subtitle, image, and customizable content.

Props

Prop Name	Type	Required	Description
`currentPost`	`UiBlogContentRecord`	Yes	The exact blog fields consumed by the component, including title, subtitle, dates, and image.
`wide`	Boolean	No	A flag to indicate if the content should be displayed in a wide layout.

Example

vue

<script setup lang="ts">
  import { VBlogContent } from '@webdevelop-pro/ui-kit/docs';
  const post = {
    title: 'My Blog Post',
    subTitle: 'An interesting subtitle',
    image: '/images/blog/players.jpeg',
    publishDate: '2024-10-10',
    updateDate: '2024-10-11',
  };
</script>
<VBlogContent :currentPost="post" wide />

My Blog Post

An interesting subtitle

VBlogDisqus

The VBlogDisqus component integrates Disqus comments into the blog page.

Props

Prop Name	Type	Required	Description
`frontendUrl`	String	Yes	The base URL for the frontend application.

Example

vue

<VBlogDisqus :frontend-url="env.FRONTEND_URL" />

VBlogHeader

The VBlogHeader component displays the blog post header, including the author's information and publication date, key tags.

Props

Prop Name	Type	Required	Description
`data`	`UiBlogContentRecord`	Yes	The exact blog fields consumed for publication date and tags.
`author`	`UiAuthorContentRecord`	Yes	The author's URL, title, image, and optional srcset.

Example

vue

<script setup lang="ts">
  import { VBlogHeader } from '@webdevelop-pro/ui-kit/docs';
  const postData = {
  title: 'Understanding Vue 3 Composition API',
  description: 'A comprehensive guide to the Vue 3 Composition API.',
  publishDate: '2024-10-10',
  image: '/images/vue-composition-api.png',
};

const authorData = {
  title: 'Iryna Maksymova',
  image: '/images/blog/iryna-photo.jpg',
};
</script>
<VBlogHeader :data="postData" :author="authorData" />

Iryna Maksymova

October 11, 2024

VBlogReadMore

The VBlogReadMore component displays up to three newest blog posts with the same tag, excluding the current post.

Props

Prop Name	Type	Required	Description
`tag`	`string`	No	Tag used to find related blog posts. Defaults to the current page's first tag.

Example

vue

<VBlogReadMore tag="Fintech" />

25 MAR, 2026

Why Tokenized Funds Are the Next ETF Moment

21 MAY, 2018

How to set up Ethereum private network

15 JUL, 2020

Hiring software development talent challenge

VBlogShare

The VBlogShare component provides sharing options for the blog post on various social media platforms.

Props

Prop Name	Type	Required	Description
`data`	`UiBlogContentRecord`	Yes	The blog tags consumed by the sharing surface.

Example

vue

<script setup lang="ts">
  import { VBlogShare } from '@webdevelop-pro/ui-kit/docs';
  const postData = {
  title: 'Understanding Vue 3 Composition API',
  description: 'A comprehensive guide to the Vue 3 Composition API.',
  publishDate: '2024-10-10',
  image: '/images/vue-composition-api.png',
  tags: ['tag1', 'tag2', 'tag3']
};
</script>
<VBlogShare :data="postData" />