Index template for route /products - https://jaiteart-web.web.app

index.vue

<template>
    <div>
        <div class="section ">

            <div class="columns is-vcentered is-centered" >
                <div class="column is-5 ">
                    <div class="px-6 has-text-centered">
                        <h2 class="
                title
                serif 
                has-text-weight-normal
                is-size-1-desktop is-size-3-touch
              ">
                            Hand Block Printed Textile Products
                        </h2>
                        <p class="is-size-4-desktop is-size-5-touch">
                            60+ Categories of handicraft products handmade by artisans all over India. With reguar
                            new additions to our range.
                        </p>
                        <br>
                        <p class="mono">Quality Fabrics — Natural & AZO Free Dyes — Handmade  </p>
                        <a class="has-text-dark  mono is-outlined">
                            Scroll down ↓
                        </a>
                    </div>
                  
                </div>
               
            </div>
        </div>
            <br>
        <div class="section py-2 mt-4 mb-5">
      
            <div class="columns  is-mobile is-multiline">
                <n-link :to="'/products/'+row.attributes.slug" class="column is-3-desktop is-6-touch has-text-dark " v-for="(row,index) in items" :key="'prod_cat_'+index">
                    <div class="">
                        <figure class="image has-background-light is-3by4">
                            <nuxt-picture provider="strapi" :src="row.attributes.image.data.attributes.formats.medium.url" />
                        </figure>
                        <p class="mt-2 serif is-size-4-desktop is-size-4-touch">{{ row.attributes.category_title }}</p>
                        <p class=" is-size-6-desktop mono">{{ row.attributes.categories.data.length }} Categories</p>

                        <n-link :to="'/products/'+row.attributes.category_title" class="is-underlined has-text-dark">View →</n-link>
                    </div>
                </n-link>
            </div>
           
        </div>

    </div>
</template>

<script>
export default {
    data(){
        return{
            items:[]
        }
    },
    async fetch() {
        await this.$axios.get('product-categories?populate=*').then((response) => {
            this.items = response.data.data
        })
    }
    ,
    layout: 'content',
}
</script>

<style>

</style>