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>