Building And Deploying a Vue.js Application Using Strapi on Render

1

This article is a guest post by Ukpai Ugochi. She wrote this blog post through the Write for the Community program.

This is a companion discussion topic for the original entry at https://strapi.io/blog/how-to-build-and-deploy-a-vue-js-application-using-strapi-on-render
2

Hey,

I’ve followed this step by step and when calling the data, nothing is displaying?

This is my code:

<div class="flex items-center mx-auto">
    <div class="flex-1 max-w-6xl mx-auto p-10 items-center">
      <ul class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3 px-2">
        <div v-if="planeitems.length">
          <div v-bind:key="planeitem.index" v-for="planeitem in planeitems">
            <li class="mx-auto items-center p-2 rounded-lg md:h-full h-full">
              <img :src="imageLink + planeitem.image" />
              <h5 class="text-lg font-bold mt-2 text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-pink-500">{{ planeitem.title }}</h5>
              <p class="text-sm mx-auto mt-2">
              {{ planeitem.description }}
              </p>
            </li>
          </div>
        </div>
      </ul>
    </div>
  </div>

This is what is in my tag:

<script>
export default {
  name: 'PlanesPage',
  data() {
    return {
      planeitems: [],
      imageLink: "http://localhost:1337/api/planeitems/"
    }
  },
  mounted() {
    fetch("http://localhost:1337/api/planeitems")
    .then((res) => res.json())
    .then((data) => {
      this.planeitems = data;
    });
  }
};
</script>

I am using TailwindCSS – please could you advise? :slight_smile:

Thanks!

3
4

I was facing a similar problem. The structure of the response was slightly off from the tutorial, which is why it wasn’t working for me.

Add a console.log(this.planeitems) to inspect the response structure of the fetch

  .then((data) => {
    this.planeitems = data
    console.log(this.planeitems)
  });

A couple things I had to change to make mine work:

  • Instead of v-bind:key=“planeitem.index” try v-bind:key=“planeitem.id”
  • Instead of mounted() try created() as the lifecycle method
  • Instead of this.planeitems = data try this.planeitems = data.data
  • Instead of {{planeitem.description}} try {{planeitem.attributes.description}}

Good luck :+1:

5

Thanks for the reply Shoverian - building on your tips, there were a few more steps I had to work out to get this functional, so if it can save someone some time…

Strapi v4 no longer returns media data (to improve performance)

So to get the extra data you have to add this to the fetch :

?populate=*

and your planeitems (or currently storeitems in this tutorial) fetch becomes:

fetch("http://localhost:1337/api/storeitems?populate=*")

and to hook it up to the right url I ended up setting my imageLink to

imageLink: "http://localhost:1337"

and got the storeitem image url using

:src="imageLink + storeitem.attributes.image.data[0].attributes.url"

FWIW!

6

Does this work also for Strapi v4?