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

Smooth links transitions on dynamic content in Vuejs Application

Usually links inside Vue.js app handle by vue-router and router-link component. It makes a transition between routes without reloading page. The smooth and slick user interface is one of the advantages of Single Page Applications. In the case with CMS content, links are inside content and can’t be processing separately but inserting as one HTML part with directive. Such links on click will reload page even if they follow the same app page.

The tiny framework based on AIOHTTP

Let me introduce our project, I think he's already moved on to a stage when it can be called a framework. Although its name says that it is boilerplate

Why Flutter's mobile app is a good idea for business in 2020

In times of crisis, companies seek to reduce costs, accelerate market entry and increase online presence through applications. Flutter is recommended as one of the speediest mobile solutions. This emerging technology could improve your mobile app development process as well as reduce costs.

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