Post previews are not loading (seems async is not running)

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?

  <!-- Check blog posts exist -->
  <div v-if="posts.length !== 0" class="blog-main">
    <!-- Template for blog posts -->
        v-for="post in posts"
          class="mx-auto card-outter"
          style="outline-color: grey; outline-style: solid"
          <router-link :to="linkResolver(post)" style="text-decoration: none">
            <hr />

              <h2 class="white--text" style="word-break: break-word">
                {{ $prismic.asText(post.title) }}

              <p class="white--text">{{ getFirstParagraph(post) }}</p>

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

  <!-- If no blog posts return message -->
  <div v-else class="blog-main">
    <p>No Posts published at this time.</p>

export default {
  name: "blog-posts",
  async asyncData({ $prismic, error }) {
    try {
      // Query to get posts content to preview
      const blogPosts = await $prismic.api.query(
        $"document.type", "post"),
        { orderings: "[ desc]" }
      // 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; (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;

Hello @csal!

What's the file name for this? Is it definitely a page rather than a component? asyncData only works in pages.

Does this log return anything?

Have you properly installed the prismic-nuxt plugin?


Thanks for your response, the fact that I was using it in a component was it. I'm still having other issues, but at least those I can solve myself (so far).


1 Like

Let me know if you get any more issues :slightly_smiling_face:

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.