Gregor Comments - Answer Overflow

Gregor

Posts Comments

NNuxt

•Created by Gregor on 10/16/2024 in #❓・help

nuxt ui with zod-validation

created a demoe here. https://stackblitz.com/edit/nuxt-ui-5rrpvr?file=app.vue,components%2FaddressForm.vue

2 replies

NNuxt

•Created by Gregor on 10/16/2024 in #❓・help

validate nuxtui radio buttons with zod

ok got it work... is used the error message from template to set an error prop on my wrapper component for the radiobutton

<UFormGroup
  required
  name="shipping"
>
  <template #default="{ error }">
    <radioBox
      v-for="(shippingVariant, index) of shippingVariants"
      :option="shippingVariant"
      v-model="shipping"
      class="flex-1"
      :error="error !== undefined"
      :classes="classes(index)"
    >

<UFormGroup
  required
  name="shipping"
>
  <template #default="{ error }">
    <radioBox
      v-for="(shippingVariant, index) of shippingVariants"
      :option="shippingVariant"
      v-model="shipping"
      class="flex-1"
      :error="error !== undefined"
      :classes="classes(index)"
    >

and inside the radiobox I put some stylings on the ui prop, where the actual <URadio /> lives not sure if that is best practise but it works 😉

2 replies

NNuxt

•Created by Gregor on 10/7/2024 in #❓・help

[useFetch] Component is already mounted, please use $fetch instead.

thanks works perfect now 😉 and with params option is much better to read, thanks alot 😉

14 replies

NNuxt

•Created by Gregor on 10/7/2024 in #❓・help

[useFetch] Component is already mounted, please use $fetch instead.

hmm understood, but also not understood in my case 😂 tried to make the whole object reative...

  const params = reactive({
    fields: `*variants.calculated_price`,
    region_id: regionId.value,
    country_code: countryCode.value,
  });

  const queryParams = new URLSearchParams(params);

  useFetch(`http://localhost:9000/store/products?handle=${handle}&${queryParams.value.toString()}`,
  ...

  const params = reactive({
    fields: `*variants.calculated_price`,
    region_id: regionId.value,
    country_code: countryCode.value,
  });

  const queryParams = new URLSearchParams(params);

  useFetch(`http://localhost:9000/store/products?handle=${handle}&${queryParams.value.toString()}`,
  ...

and also this with getter

  const queryParams = new URLSearchParams({
    fields: `*variants.calculated_price`,
    region_id: () => regionId.value,
    country_code: () => countryCode.value,
  });

  useFetch(`http://localhost:9000/store/products?handle=${handle}&${queryParams.toString()}`,
  ...

  const queryParams = new URLSearchParams({
    fields: `*variants.calculated_price`,
    region_id: () => regionId.value,
    country_code: () => countryCode.value,
  });

  useFetch(`http://localhost:9000/store/products?handle=${handle}&${queryParams.toString()}`,
  ...

but no success...

14 replies

NNuxt

•Created by Gregor on 10/7/2024 in #❓・help

[useFetch] Component is already mounted, please use $fetch instead.

thanks for the video 😉 my composable looks like this. I have only the problem that the url is no more reactive...

export default function useGetProduct() {
  const route = useRoute();
  const handle = route.params.product;
  const regionsStore = useRegionsStore();
  const { regionId, countryCode } = storeToRefs(regionsStore);

  const queryParams = new URLSearchParams({
    fields: `*variants.calculated_price`,
    region_id: regionId.value,
    country_code: countryCode.value,
  });
  //tried a function as well
  const getQueryParams = () => {
    return new URLSearchParams({
      fields: `*variants.calculated_price`,
      region_id: regionId.value,
      country_code: countryCode.value,
    }).toString();
  };

  const { MEDUSA_PUBLISHABLE_KEY } = useRuntimeConfig().public;

  const { error, data, refresh } = useFetch(
    `http://localhost:9000/store/products?handle=${handle}&${getQueryParams()}`,
    {
      credentials: "include",
      headers: {
        "x-publishable-api-key": MEDUSA_PUBLISHABLE_KEY,
      },
    }
  );

  const getProduct = async () => {
    //values gets uodated
    console.log(regionId.value, countryCode.value);
    console.log(getQueryParams());
    await refresh();
    if (error.value) {
      console.error("error", error.value);
    } else {
      return data.value.products[0];
    }
  };
  return { getProduct };
}

export default function useGetProduct() {
  const route = useRoute();
  const handle = route.params.product;
  const regionsStore = useRegionsStore();
  const { regionId, countryCode } = storeToRefs(regionsStore);

  const queryParams = new URLSearchParams({
    fields: `*variants.calculated_price`,
    region_id: regionId.value,
    country_code: countryCode.value,
  });
  //tried a function as well
  const getQueryParams = () => {
    return new URLSearchParams({
      fields: `*variants.calculated_price`,
      region_id: regionId.value,
      country_code: countryCode.value,
    }).toString();
  };

  const { MEDUSA_PUBLISHABLE_KEY } = useRuntimeConfig().public;

  const { error, data, refresh } = useFetch(
    `http://localhost:9000/store/products?handle=${handle}&${getQueryParams()}`,
    {
      credentials: "include",
      headers: {
        "x-publishable-api-key": MEDUSA_PUBLISHABLE_KEY,
      },
    }
  );

  const getProduct = async () => {
    //values gets uodated
    console.log(regionId.value, countryCode.value);
    console.log(getQueryParams());
    await refresh();
    if (error.value) {
      console.error("error", error.value);
    } else {
      return data.value.products[0];
    }
  };
  return { getProduct };
}

Do you have any idea how I can get around this?

14 replies

NNuxt

•Created by Gregor on 10/7/2024 in #❓・help

[useFetch] Component is already mounted, please use $fetch instead.

just watching 😉

14 replies

NNuxt

•Created by Gregor on 10/7/2024 in #❓・help

[useFetch] Component is already mounted, please use $fetch instead.

in the product page I call this action from my pinia store

  const fetchProduct = async () => {
    await productsStore.getProduct(route.params.product);
  };
  //initial load
  const product = ref(await fetchProduct());

  // on region change reload product
  watch(regionId, async () => {
    product.value = await fetchProduct();
  });

  const fetchProduct = async () => {
    await productsStore.getProduct(route.params.product);
  };
  //initial load
  const product = ref(await fetchProduct());

  // on region change reload product
  watch(regionId, async () => {
    product.value = await fetchProduct();
  });

14 replies

NNuxt

•Created by Gregor on 8/27/2024 in #❓・help

pretty urls for e-commerce shop

Because there are no categories only products with properties that I can filter. The way

?page=2&sort=new-arrival

?page=2&sort=new-arrival

is ok, was just thinking if there is a more beauty way

3 replies

NNuxt

•Created by Gregor on 7/9/2024 in #❓・help

ui.nuxt: Overwriting styles for UInput doesn't work

Ok, I found out that I have to set a colour for it to work... but if I use the combination white/outline, it doesn't work either.

2 replies

NNuxt

•Created by Gregor on 6/10/2024 in #❓・help

nuxtpage: child page inside parent page

thank you all, works brilliant now 🙂 placing the categories/index.vue outside the folder and rename it to categories.vue solved my problem

10 replies

NNuxt

•Created by Gregor on 6/10/2024 in #❓・help

nuxtpage: child page inside parent page

I also tried to create a second layout

//layouts/categories.vue
<template>
  <div class="flex">
    <div class="w-full">
      Assortment
      <uLink to="/categories/cat1">Cat1</uLink>
      <uLink to="/categories/cat2">Cat2</uLink>
      <uLink to="/categories/cat3">Cat3</uLink>
    </div>
    <div>
      <slot />
    </div>
  </div>
</template>

//layouts/categories.vue
<template>
  <div class="flex">
    <div class="w-full">
      Assortment
      <uLink to="/categories/cat1">Cat1</uLink>
      <uLink to="/categories/cat2">Cat2</uLink>
      <uLink to="/categories/cat3">Cat3</uLink>
    </div>
    <div>
      <slot />
    </div>
  </div>
</template>

//categories/index.vue
<template>
  <nuxt-layout name="categories" :page-key="(route) => route.fullPath">
    <NuxtPage />
  </nuxt-layout>
</template>

//categories/index.vue
<template>
  <nuxt-layout name="categories" :page-key="(route) => route.fullPath">
    <NuxtPage />
  </nuxt-layout>
</template>

10 replies

NNuxt

•Created by Gregor on 6/10/2024 in #❓・help

nuxtpage: child page inside parent page

url should be domain.com/categories and if I select a category domain.com/categories/cat1

10 replies

NNuxt

•Created by Gregor on 6/10/2024 in #❓・help

nuxtpage: child page inside parent page

10 replies

NNuxt

•Created by Gregor on 4/10/2024 in #❓・help

dynamic pagetransitions with js hooks

ok found a way todo it in a global middleware

export default defineNuxtRouteMiddleware((to, from) => {
  const { $gsap } = useNuxtApp();
  from.meta.pageTransition.onLeave = (el, done) => {
    if (to.meta.name === "car-detail") {
      console.log("ist cars detail leave");
      done();
    } else {
      console.log("all other routes leave");
      done()
    }
  };
  to.meta.pageTransition.onEnter = (el, done) => {
    if (to.meta.name === "car-detail") {
      console.log("ist cars detail enter");
      done();
    } else {
      console.log("all other routes enter");
      done();
    }
  };
});

export default defineNuxtRouteMiddleware((to, from) => {
  const { $gsap } = useNuxtApp();
  from.meta.pageTransition.onLeave = (el, done) => {
    if (to.meta.name === "car-detail") {
      console.log("ist cars detail leave");
      done();
    } else {
      console.log("all other routes leave");
      done()
    }
  };
  to.meta.pageTransition.onEnter = (el, done) => {
    if (to.meta.name === "car-detail") {
      console.log("ist cars detail enter");
      done();
    } else {
      console.log("all other routes enter");
      done();
    }
  };
});

is this the way ?

2 replies

Gaming

Programming