I wanted to display post previews in my vuejs project, and following the vuejs guide, I was able to do so without much issue.
However, I then migrated the project to nuxt and have been mostly successful, but even though I'm currently following the example of this prismic nuxt guide (which doesn't appear to work either), I can't to make the async code run, because the if check gives me an undefined value for posts and if I remove that, along with the else, still nothing shows up post-wise.
Any help?
<template>
<!-- Check blog posts exist -->
<div v-if="posts.length !== 0" class="blog-main">
<!-- Template for blog posts -->
<v-row>
<v-col
v-for="post in posts"
:key="post.id"
v-bind:post="post"
class="blog-post"
>
<v-card
class="mx-auto card-outter"
width="350"
height="100%"
outlined
color="black"
hover
style="outline-color: grey; outline-style: solid"
>
<router-link :to="linkResolver(post)" style="text-decoration: none">
<v-img
:src="`${post.body[0].primary.image.url}!`"
height="200px"
></v-img>
<hr />
<v-card-title>
<h2 class="white--text" style="word-break: break-word">
{{ $prismic.asText(post.title) }}
</h2>
</v-card-title>
<v-card-subtitle>
<p class="white--text">{{ getFirstParagraph(post) }}</p>
</v-card-subtitle>
<v-card-actions class="d-flex align-end">
<v-btn color="black lighten-2" text>
<p class="blog-post-meta white--text">
<span class="created-at">{{
Intl.DateTimeFormat("en-US", dateOptions).format(
new Date(post.date)
)
}}</span>
</p>
</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</router-link>
</v-card>
</v-col>
</v-row>
</div>
<!-- If no blog posts return message -->
<div v-else class="blog-main">
<p>No Posts published at this time.</p>
</div>
</template>
<script>
export default {
name: "blog-posts",
async asyncData({ $prismic, error }) {
try {
// Query to get posts content to preview
const blogPosts = await $prismic.api.query(
$prismic.predicates.at("document.type", "post"),
{ orderings: "[my.post.date desc]" }
);
console.log(blogPosts)
// Returns data to be used in template
return {
posts: blogPosts.results,
// image: homepageContent.image.url,
};
} catch (e) {
// Returns error page
error({ statusCode: 404, message: "Page not found" });
}
},
data() {
return {
dateOptions: { year: "numeric", month: "short", day: "2-digit" },
linkResolver: this.$prismic.linkResolver,
};
},
methods: {
//Function to get the first paragraph of text in a blog post and limit the displayed text at 300 characters
getFirstParagraph(post) {
const textLimit = 150;
const slices = post.body;
let firstParagraph = "";
let haveFirstParagraph = false;
slices.map(function (slice) {
if (!haveFirstParagraph) {
if (slice.slice_type == "text") {
slice.primary.text.forEach(function (block) {
if (block.type == "paragraph") {
if (!haveFirstParagraph) {
firstParagraph += block.text;
haveFirstParagraph = true;
}
}
});
}
}
});
const limitedText = firstParagraph.substr(0, textLimit);
if (firstParagraph.length > textLimit) {
return limitedText.substr(0, limitedText.lastIndexOf(" ")) + "...";
} else {
return firstParagraph;
}
}
}
};
</script>
