Blog Single

VBlogContent

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.

Props

Prop NameTypeRequiredDescription
currentPostIFrontmatterYesThe frontmatter data for the current blog post, including title, subtitle, and image.
wideBooleanNoA flag to indicate if the content should be displayed in a wide layout.

Example

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

My Blog Post

An interesting subtitle

VBlogDisqus

The VBlogDisqus component integrates Disqus comments into the blog page.

Props

Prop NameTypeRequiredDescription
frontendUrlStringYesThe 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 NameTypeRequiredDescription
dataIFrontmatterYesThe frontmatter data for the current blog post.
authorIFrontmatterYesThe author data for the blog post.

Example

vue
<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" />
  • tag1
  • tag2
  • tag3

VBlogReadMore

The VBlogReadMore component displays a list of random blog posts, excluding the current post.

Example

vue
<VBlogReadMore />

Evolution of the traditional outsource companies?

Rules outsourcing companies create force them to build a solution that will tie the client to one specific company and which will work barely enough to fit client requirements. Costs for finding a new client are too high, and the expense of building an en

Digital banking as a mainstream in FinTech - are you ready?

Any bank that is not ready for the digitalization should prepare to keep up with rivals. The competition is strong and demand is high. There are a lot of already transformed financial institutions into successful mobile banks and they raise their influence every day, as they operate faster and provide smarter and more efficient services.

Driving your Project From Draft To Perfection

When you start looking for a reliable outsourcing company for complex solutions in Fintech, Ecommerce or IoT, it’s good to know the difference between an average company and a good one. In our experience, the following issues might occur

VBlogShare

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

Props

Prop NameTypeRequiredDescription
dataIFrontmatterYesThe frontmatter data for the current blog post.

Example

vue
<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" />
  • tag1
  • tag2
  • tag3
Help Ukraine to stop russian aggression