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" />

15 MAY, 2020

Using GoLang and MQTT

27 MAR, 2020

6 top soft skills for QA

25 MAR, 2020

How to develop new functionality with maximum benefit for a product?

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" />