35 lines
897 B
Vue
35 lines
897 B
Vue
<template>
|
|
<v-container>
|
|
<div class="max-w-[720px] mx-auto flex flex-col gap-2">
|
|
<v-card v-for="item in posts">
|
|
<v-img
|
|
v-if="item.thumbnail"
|
|
cover
|
|
class="align-end"
|
|
height="180"
|
|
:src="item.thumbnail"
|
|
/>
|
|
<div class="py-5 px-7">
|
|
<h2 class="text-xl font-medium">{{ item.title }}</h2>
|
|
<p class="mt-3 opacity-80">{{ item.description }}</p>
|
|
<div class="mt-3 flex justify-end">
|
|
<v-btn
|
|
variant="text"
|
|
prepend-icon="mdi-page-next"
|
|
:href="'/posts/' + item.slug"
|
|
>
|
|
Read more
|
|
</v-btn>
|
|
</div>
|
|
</div>
|
|
</v-card>
|
|
</div>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { data: posts } = await useAsyncData("posts", () =>
|
|
queryContent("posts").find()
|
|
);
|
|
</script>
|