Muhammad Awais Posts - Answer Overflow

Muhammad Awais

•Created by Muhammad Awais on 12/24/2024 in #❓・help

Wrapper to a component with same props, emits and other attributes

Hi everyone, I have been using formkit from over a year now. But the thing I struggle with most is consistent styling. I'm using tailwindcss and working in an on-going project so can't use themes I might have to do alot of overwrites. One solution I come up with is to create wrapper components, the hurdle to this approach is props passing and listening to emits. Can anyone guide me how can I create wrapper components. Thank you

14 replies

NNuxt

•Created by Muhammad Awais on 9/16/2024 in #❓・help

Google Auth scopes for nuxt-auth-utils

Hello everyone, I'm trying to integrate google sign-in in my app. And I have added the scopes for the birthday, gender and country. But the user returned by the nuxt-auth event have basic profile properties only. I have to make another api call to extract extra information. Is there any way to get all the properties on the user returned after authentication is successful.

1 replies

NNuxt

•Created by Muhammad Awais on 8/23/2024 in #❓・help

Handling multiple modals.

How can we handle multiple modals within the Nuxt app. I have separate modals for signup, login, password reset and some other things. But I'm unable to manage them globally. I have tried useState but it throws the error cannot stringify functions. Here are my implementations: usemodal works as a controller for single modal

export const useModal = (closeOtherModals: () => void) => {
  const isOpen = ref(false);

  function open() {
    closeOtherModals();
    isOpen.value = true;
  }

  function close() {
    isOpen.value = false;
  }

  return {
    isOpen: computed(() => isOpen.value),
    open,
    close,
  };
};

export const useModal = (closeOtherModals: () => void) => {
  const isOpen = ref(false);

  function open() {
    closeOtherModals();
    isOpen.value = true;
  }

  function close() {
    isOpen.value = false;
  }

  return {
    isOpen: computed(() => isOpen.value),
    open,
    close,
  };
};

define-modals defines all the modals available.

export default () => {
  const modals = useState(
    "modals",
    (): { [k: string]: ReturnType<typeof useModal> } => {
      return {};
    },
  );
  const closeModals = () => {
    let modal: keyof typeof modals.value;
    for (modal in modals.value) {
      if (modals.value[modal].isOpen.value) {
        modals.value[modal].close();
      }
    }
  };

  modals.value = {
    login: useModal(closeModals),
    signup: useModal(closeModals),
    forgotPassword: useModal(closeModals),
    resetPassword: useModal(closeModals),
    emailConfirmationSuccess: useModal(closeModals),
    emailConfirmationFailed: useModal(closeModals),
    bookingDetailsModal: useModal(closeModals),
    profileCompletionModal: useModal(closeModals),
  };
  return {
    loginModal: modals.value.login,
    signupModal: modals.value.signup,
    forgotPasswordModal: modals.value.forgotPassword,
    resetPasswordModal: modals.value.resetPassword,
    emailConfirmSuccessModal: modals.value.emailConfirmationSuccess,
    emailConfirmFailedModal: modals.value.emailConfirmationFailed,
    bookingDetailsModal: modals.value.bookingDetailsModal,
    profileCompletionModal: modals.value.profileCompletionModal,
  };
};

export default () => {
  const modals = useState(
    "modals",
    (): { [k: string]: ReturnType<typeof useModal> } => {
      return {};
    },
  );
  const closeModals = () => {
    let modal: keyof typeof modals.value;
    for (modal in modals.value) {
      if (modals.value[modal].isOpen.value) {
        modals.value[modal].close();
      }
    }
  };

  modals.value = {
    login: useModal(closeModals),
    signup: useModal(closeModals),
    forgotPassword: useModal(closeModals),
    resetPassword: useModal(closeModals),
    emailConfirmationSuccess: useModal(closeModals),
    emailConfirmationFailed: useModal(closeModals),
    bookingDetailsModal: useModal(closeModals),
    profileCompletionModal: useModal(closeModals),
  };
  return {
    loginModal: modals.value.login,
    signupModal: modals.value.signup,
    forgotPasswordModal: modals.value.forgotPassword,
    resetPasswordModal: modals.value.resetPassword,
    emailConfirmSuccessModal: modals.value.emailConfirmationSuccess,
    emailConfirmFailedModal: modals.value.emailConfirmationFailed,
    bookingDetailsModal: modals.value.bookingDetailsModal,
    profileCompletionModal: modals.value.profileCompletionModal,
  };
};

Inject/provide were not also helpful as state is not SSR friendly in that case.

11 replies

NNuxt

•Created by Muhammad Awais on 7/2/2024 in #❓・help

fetch wrapper for api calls

Hello people, I have struggling with creating a nice wrapper around $fetch from a long time now. Here is a complete overview of what I want. A function that I can use for authenticated requests and when a request gives unauthorized error (401) means the current auth token is expired then I want to call refresh token api and update the auth token, retry the previous request with new token. Here is what I have been able to come up with:

type Request = Parameters<typeof $fetch>[0];

type ExtendedFetchOptions = Parameters<typeof $fetch>[1] & {
  authToken: string;
  refreshTokens: () => Promise<string>;
};

export default async function authorizedRequest<T>(
  request: Request,
  options: ExtendedFetchOptions,
): Promise<API_Response<T>> {
  try {
    const response = await $fetch<API_Response<T>>(request, {
      ...options,
      headers: {
        ...options?.headers,
        Authorization: options.authToken,
      },
      baseURL: useRuntimeConfig().public.baseURL,
    });
    return response;
  } catch (fetchError: any) {
    if (fetchError.statusCode == constants.STATUS_UNAUTHORIZED) {
      try {
        const newToken = await options.refreshTokens();
        options.authToken = newToken;
        return authorizedRequest(request, options);
      } catch (refreshTokenError: any) {
        throw refreshTokenError;
      }
    }
    throw fetchError;
  }
}

type Request = Parameters<typeof $fetch>[0];

type ExtendedFetchOptions = Parameters<typeof $fetch>[1] & {
  authToken: string;
  refreshTokens: () => Promise<string>;
};

export default async function authorizedRequest<T>(
  request: Request,
  options: ExtendedFetchOptions,
): Promise<API_Response<T>> {
  try {
    const response = await $fetch<API_Response<T>>(request, {
      ...options,
      headers: {
        ...options?.headers,
        Authorization: options.authToken,
      },
      baseURL: useRuntimeConfig().public.baseURL,
    });
    return response;
  } catch (fetchError: any) {
    if (fetchError.statusCode == constants.STATUS_UNAUTHORIZED) {
      try {
        const newToken = await options.refreshTokens();
        options.authToken = newToken;
        return authorizedRequest(request, options);
      } catch (refreshTokenError: any) {
        throw refreshTokenError;
      }
    }
    throw fetchError;
  }
}

Please review this and provide your valuable advice. Another thing that I have struggled with a lot is use of useAsyncData or useFetch for requests that don’t involve reactive values. These requests can be signup, login or requests that are needed to be sent on some user action. How should I use my fetch wrapper should I use it with useAsyncData for a much nicer error handling or use try catch Thank you very much

1 replies

NNuxt

•Created by Muhammad Awais on 7/1/2024 in #❓・help

Type custom plugins

Hey everyone, I'm creating a custom algolia plugin to perform search. I want to know two things. 1. Is this a good usecase to create a plugin? or should i go for composable 2. how can we type custom plugins Thanks

2 replies

NNuxt

•Created by Muhammad Awais on 5/19/2024 in #❓・help

Insert html in head

Hi there, I'm fetching some seo data from a wordpress plugin but it is returning string how can I insert that in the head, Thanks

14 replies

NNuxt

•Created by Muhammad Awais on 5/13/2024 in #❓・help

getCachedData or swr: true

I'm using getCachedData for getting chached data but swr can also help with that which one is more helpful?

2 replies

NNuxt

•Created by Muhammad Awais on 5/10/2024 in #❓・help

Run time config visible in page source

Hi everyone, I'm using public runtime config to store base url of my backend application but client doesn't want the url to be visible in the page source. Nuxt attaches public configs to window object and those are visible in page source. What can be the better way to sotre base url. I'm using graphql.

13 replies

NNuxt

•Created by Muhammad Awais on 5/6/2024 in #❓・help

Design v-html content

Hi everyone, I wanted to ask what is correct and efficient way to design v-html content in nuxt. Thanks!

1 replies

NNuxt

•Created by Muhammad Awais on 5/1/2024 in #❓・help

State Management Advice

Hi everyone, I have a lot of nesting components inside a single component in which I need to share the state that means I have to pass nested props that look kinda ugly to me and then the state is also shared among two components on the same page. Currently I'm using Pinia store but that makes it a global state that stays throughout the lifecycle of the whole app. I'm seeking any advice that anybody can give on this. Thanks for your time

3 replies

NNuxt

•Created by Muhammad Awais on 4/3/2024 in #❓・help

useAsyncData weird behavior

3 replies

Gaming

Programming