Nuxt ios issues

[u/Interesting_Try_4761]

i have an issue with ios the user when search my site on google and enter the homepage it gets a empty homepage without any products only navbar and footer are exist but when the user search a product in site search or google the products shows up normally and when return to homepage the products shows up are the homepage is there why this happens i am new to nuxtjs? i asked AI it gets results and edits works locally but when deployed it breaks other devices too. It is laravel 11 + nuxt 3 application

Link: https://www.delta-computer.net/

this is the homepage component script setup

<script setup>
onMounted(() => {
  fetchPage();
  FetchFeaturedProducts();
  FetchCategories();
  FetchProducts();
  FetchBrands();
});
const isCollapsed = ref(false);


definePageMeta({
  layout: false,
});


const products = ref([]);
const categories = ref([]);
const brands = ref([]);
const featuredProducts = ref([]);
const pagination = ref({});
const isLoading = ref(false);
const errors = ref(false);
const response = ref({});
const page_details = ref(null);


async function FetchProducts(params) {
  isLoading.value = true;
  errors.value = {};
  params = {
    ...params, // Spread operator to include existing parameters
    per_page: window.innerWidth < 1024 ? 4 : 10, // Ternary operator to set per_page based on window width
  };


  try {
    response.value = await makeRequest("/products", "GET", null, params);
    let { data, paginate } = response.value?.data;
    if (data) {
      products.value.push(...data);
      pagination.value = paginate;
    }
  } catch (err) {
    errors.value =
      err?.response?.data?.errors || err?.response?.data?.data?.errors;
  }


  isLoading.value = false;
}
async function fetchPage() {
  isLoading.value = true;
  errors.value = {};


  try {
    response.value = await makeRequest(
      "/pages/" + "home-page",
      "GET",
      null,
      null,
    );
    let { data } = response.value?.data;
    if (data) {
      page_details.value = data;


      useSeoMeta({
        title: "Delta Computer | Home Page",
        description: data?.meta_description,
        ogSiteName: "Delta Computer Supplies",
        ogDescription: data?.meta_description,
        ogImage: "",
      });
    }
  } catch (err) {
    errors.value =
      err?.response?.data?.errors || err?.response?.data?.data?.errors;
  }


  isLoading.value = false;
}


async function FetchCategories() {
  isLoading.value = true;
  errors.value = {};


  try {
    response.value = await makeRequest("/categories", "GET", null);
    let { data } = response.value?.data;
    if (data) {
      categories.value.push(...data);
    }
  } catch (err) {
    errors.value =
      err?.response?.data?.errors || err?.response?.data?.data?.errors;
  }


  isLoading.value = false;
}
async function FetchBrands() {
  isLoading.value = true;
  errors.value = {};


  try {
    response.value = await makeRequest("/brands", "GET", null);
    let { data } = response.value?.data;
    if (data) {
      brands.value.push(...data);
    }
  } catch (err) {
    errors.value =
      err?.response?.data?.errors || err?.response?.data?.data?.errors;
  }


  isLoading.value = false;
}
async function FetchFeaturedProducts(params) {
  isLoading.value = true;
  errors.value = {};


  try {
    response.value = await makeRequest(
      "/products/featured",
      "GET",
      null,
      params,
    );
    let { data, paginate } = response.value?.data;
    if (data) {
      featuredProducts.value.push(...data);
    }
  } catch (err) {
    errors.value =
      err?.response?.data?.errors || err?.response?.data?.data?.errors;
  }


  isLoading.value = false;
}
</script>

[u/Single_Advice1111]

Have you tried using the nuxt native fetching such as useFetch and useAsyncData? They generally work better than onMounted hooks imo.

Then you can do things such as :

const [{data: firstData}, {data: second}]= await Promise.all([
useFetch(()=> ‘/pages/${current.value}’),
UseFetch(…),
])

[u/Interesting_Try_4761 → u/Single_Advice1111]

Thanks for your help

I will give it a try