Consuming an api using faker.js with nuxt 3

Question

I want to create a shopping card with nuxt 3. For that I have an API which must provide data from faker.js. I want to show them in my about file and integrate sorting functionalities. but I can't in first show this datas in my screen. Here is the contents of the about file in pages/about.vue

<template>

    <div>

      <h2>About</h2>

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet aperiam minima unde nemo harum quam maxime optio quos corrupti. Eum sapiente facere nemo, laborum ullam non cum fuga quas eveniet harum molestiae minus atque vel ratione illo quia, iure commodi dicta porro excepturi quam. Facere, commodi corrupti ipsam neque totam reprehenderit laboriosam laborum veniam est quo, repellat saepe impedit labore?</p>

      <p>api response:</p>

      <div v-for="(product, index) in products" :key="index">

      <h2>{{ product.name }}</h2>

      <p>Price: {{ product.price }}</p>

    </div>

      <ul>

      <li v-for="product in products" :key="product.id">

        <h2>{{ product.name }}</h2>

        <p>Brand: {{ product.brand }}</p>

        <p>Price: {{ product.price }}</p>

        <!-- Additional product details... -->

      </li>

    </ul>

    </div>

  </template>

  

  <style scoped>

    h2 {

      margin-bottom: 20px;

      font-size: 36px;

    }

    p {

      margin: 20px 0;

    }

  </style>

  

  <script setup> 

//import products from './server/api/products';

//import prodt from '/server/api/products';

//import products from '/server/products'

const { data: products } = await useFetch('./server/api/products')

  console.log('++++++++++++++++++++++'.products)

  </script>

and the API in server/api/products.js

 const { fakerDE: faker } = require('@faker-js/faker');

faker.seed(984513174);

function generateDiscount() {

  return faker.number.int({min: 10, max: 50})

}

function generateRating() {

  return faker.number.int({min: 1, max: 5})

}

function generateProductDetailURL(productName) {

  const baseUrl = faker.internet.url({protocol: 'https', appendSlash: true});

  const productSlug = faker.helpers.slugify(productName);

  return baseUrl.concat(productSlug);

}

const generateProducts = () => {

  const products = [];

  for (let i = 1; i <= 16; i++) {

    const productName = faker.commerce.productName();

    const product = {

      id: i,

      brand: faker.company.name(),

      originalProductUrl: generateProductDetailURL(productName),

      name: productName,

      category: faker.helpers.arrayElement(['Furniture', 'Desktops', 'Travel', 'Comics']),

      description: faker.commerce.productDescription(),

      price: parseFloat(faker.commerce.price({min: 10, max: 250, precision:0.01, dec: 2})),

      discount: generateDiscount(),

      imageURL: faker.image.urlPicsumPhotos({width: 512, height: 512}),

      rating: generateRating(),

    };

    products.push(product);

  };

  return {

    meta: {

      total: products.length

    },

    data: products

  };

};

module.exports = generateProducts();

I get no data on my screen

Answer 1

Is your API URL from the server folder of Nuxt? If so, the codes you provided will not work with Nuxt. See server guide documentation

In your case, here is a working example based on the codes you provided.

~/server/api/products.js

import { faker } from '@faker-js/faker'

export default defineEventHandler( ( event ) => {

    function generateDiscount() {
        return faker.number.int( { min: 10, max: 50 } )
    }
    function generateProductDetailURL( productName ) {
        const baseUrl = faker.internet.url( { protocol: 'https', appendSlash: true } )
        const productSlug = faker.helpers.slugify( productName )
        return baseUrl.concat( productSlug )
    }

    function generateRating() {
        return faker.number.int( { min: 1, max: 5 } )
    }

    const products = []
    for ( let i = 1; i <= 20; i++ ) {
        const productName = faker.commerce.productName()
        const product = {
            id: i,
            brand: faker.company.name(),
            originalProductURL: generateProductDetailURL( productName ),
            name: productName,
            imageURL: faker.image.urlPicsumPhotos( { width: 900, height: 600 } ),
            price: parseFloat( faker.commerce.price( { min: 50, max: 250, dec: 2 } ) ),
            rating: generateRating(),
            discount: generateDiscount()
        }
        products.push( product )
    }
    return products
} )

There is also a problem with your URL syntax when using the useFetch composable. Assuming that the products.js is from the server folder of Nuxt.

~/pages/about.vue

<script setup>
const { data: products } = await useFetch( '/api/products' )

</script>
<template>
    <div>
        Total Products: {{ products.length }}
        <pre>
            {{ products }}
        </pre>
    </div>
</template>

Use these codes and it should be working on your end and you should be able to see 20 products in this example.

Tested and it works.

Hope that helps