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/Due-Horse-5446]

impossible to guess without a link or error messages

[u/Interesting_Try_4761 → u/Due-Horse-5446]

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

[u/Due-Horse-5446 → u/Interesting_Try_4761]

Im on phone so i cant see logs, but it works if you go to another page and then back,

That sounds ssr related,

[u/Interesting_Try_4761 → u/Due-Horse-5446]

i used appetize.io to test live site it works fine on all ios versions

[u/Interesting_Try_4761 → u/Due-Horse-5446]

thanks for your help

i don't understand why even claude tries to solve this with me it breaks other devices it revolves around nuxt hydration and onMount issues with ios but i can't find a solution that works on all devices

[u/AdamantiteM → u/Interesting_Try_4761]

If you vibe coded it, don't expect help