Article

<script setup lang="ts">
import VCardArticle from 'UiKit/components/VCard/VCardArticle';
</script>

<template>
  <VCardArticle
    :data="{
      title: 'How to Improve Performance in Vue',
      description: 'A comprehensive guide to optimizing performance in your Vue.js applications.',
      publishDate: '2025-01-10T00:00:00Z',
      url: '/articles/vue-performance',
      cover: { image: '/images/blog/players.jpeg' },
    }"
  />
</template>

<script setup lang="ts">
import VSectionCardArticleList from 'UiKit/components/VCard/VSectionCardArticleList.vue';
const articles = [
  {
    title: 'Article One',
    description: 'This is the description for article one.',
    publishDate: '2024-01-10',
    url: '#',
    slug: 'article-one',
    cover: { image: '/images/blog/players.jpeg' },
  },
  {
    title: 'Article Two',
    description: 'This is the description for article two.',
    publishDate: '2024-01-12',
    url: '#',
    slug: 'article-two',
    cover: { image: '/images/blog/players.jpeg' },
  },
  // More articles can be added here
];
</script>
<template>
  <VSectionCardArticleList
    title="Latest Articles"
    subTitle="Stay informed with our updates"
    :items="articles"
    buttonHref="/articles"
    buttonText="View All"
  >
    <template #infoShort>
      <p>Read the most recent updates and articles from our team.</p>
    </template>

    <template #noData>
      <p>No articles available at the moment. Please check back later.</p>
    </template>
  </VSectionCardArticleList>
</template>

<script setup lang="ts">
import VCardArticleMain from 'UiKit/components/VCard/VCardArticleMain.vue';

// Sample article data
const articleData = {
  title: 'How to Build Scalable Vue Applications',
  description: 'This article walks you through best practices for building scalable applications with Vue.',
  publishDate: '2024-01-01',
  url: '/articles/build-vue-applications',
  cover: {
    image: '/images/article-cover.jpg'
  }
};
</script>

<template>
  <VCardArticleMain
    :data="articleData"
    :secondary="false"
  />
</template>