The VBlogContent component is a Vue 3 component that displays the content of a blog post, including the title, subtitle, cover image, and customizable content.
| Prop Name | Type | Required | Description |
|---|---|---|---|
currentPost | IFrontmatter | Yes | The frontmatter data for the current blog post, including title, subtitle, and image. |
wide | Boolean | No | A flag to indicate if the content should be displayed in a wide layout. |
<script setup lang="ts">
import VBlogContent from 'UiKit/components/VPage/VBlog/VBlogContent.vue';
const post = {
title: 'My Blog Post',
subTitle: 'An interesting subtitle',
cover: {
image: '/images/blog/players.jpeg',
},
publishDate: '2024-10-10',
updateDate: '2024-10-11',
};
</script>
<VBlogContent :currentPost="post" wide />An interesting subtitle
The VBlogDisqus component integrates Disqus comments into the blog page.
| Prop Name | Type | Required | Description |
|---|---|---|---|
frontendUrl | String | Yes | The base URL for the frontend application. |
<VBlogDisqus :frontend-url="env.FRONTEND_URL" />The VBlogHeader component displays the blog post header, including the author's information and publication date, key tags.
| Prop Name | Type | Required | Description |
|---|---|---|---|
data | IFrontmatter | Yes | The frontmatter data for the current blog post. |
author | IFrontmatter | Yes | The author data for the blog post. |
<script setup lang="ts">
import VBlogHeader from 'UiKit/components/VPage/VBlog/VBlogHeader.vue';
const postData = {
title: 'Understanding Vue 3 Composition API',
description: 'A comprehensive guide to the Vue 3 Composition API.',
publishDate: '2024-10-10',
cover: {
image: '/images/vue-composition-api.png',
alt: 'Vue 3 Composition API',
},
};
const authorData = {
title: 'Iryna Maksymova',
cover: {
image: '/images/blog/iryna-photo.jpg',
},
};
</script>
<VBlogHeader :data="postData" :author="authorData" />The VBlogReadMore component displays a list of random blog posts, excluding the current post.
<VBlogReadMore />Choosing simple and fast solutions over security is not our way. We have worked with many projects that required a high level of security. Over the years we’ve learned to find a balance between the project budget, high-security standards, and better experience for the end-user. In Webdevelop Pro we strive to incorporate security into every product that we create.
This article provides a simple example of using Vue.js to work with SVG graphics.
The island in the eastern Mediterranean - Cyprus - is known as a popular outsourcing place for IT-workers from all over the world, and in particular from Europe. What exactly attracts them on this small piece of land among the waters of the Mediterranean
The VBlogShare component provides sharing options for the blog post on various social media platforms.
| Prop Name | Type | Required | Description |
|---|---|---|---|
data | IFrontmatter | Yes | The frontmatter data for the current blog post. |
<script setup lang="ts">
import VBlogShare from 'UiKit/components/VPage/VBlog/VBlogShare.vue';
const postData = {
title: 'Understanding Vue 3 Composition API',
description: 'A comprehensive guide to the Vue 3 Composition API.',
publishDate: '2024-10-10',
cover: {
image: '/images/vue-composition-api.png',
alt: 'Vue 3 Composition API',
},
tags: ['tag1', 'tag2', 'tag3']
};
</script>
<VBlogShare :data="postData" />