My Blog Post
An interesting subtitle
14 FEB, 2018
Unit Tests in Golang Way
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 />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" />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" />
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" />