salomon_. Posts - Answer Overflow

salomon_.

Posts Comments

NNuxt

•Created by salomon_. on 9/10/2024 in #❓・help

Cannot render HTML string comes from external API

3 replies

NNuxt

•Created by salomon_. on 5/31/2024 in #❓・help

Server side fetch refetches on client 3 times

I call useFetch() in 3 components and when I do switch locale it refetches 3 times on client. Why? Shouldn't it cached after 1st call? I followed recipe on nuxt docs so I got: Custom fetch

export default defineNuxtPlugin(() => {
  const { apiDomain } = useAppConfig();

  const api = $fetch.create({
    baseURL: apiDomain,
    onRequest({ options }) {
      const localeCookie = useCookie('i18n_redirected');

      if (localeCookie.value) {
        const headers = (options.headers ||= {});
        if (Array.isArray(headers)) {
          headers.push(['X-Localization', localeCookie.value]);
        } else if (headers instanceof Headers) {
          headers.set('X-Localization', localeCookie.value);
        } else {
          headers['X-Localization'] = localeCookie.value;
        }
      }
    },
  });

  // Expose to useNuxtApp().$api
  return {
    provide: {
      api,
    },
  };
});

export default defineNuxtPlugin(() => {
  const { apiDomain } = useAppConfig();

  const api = $fetch.create({
    baseURL: apiDomain,
    onRequest({ options }) {
      const localeCookie = useCookie('i18n_redirected');

      if (localeCookie.value) {
        const headers = (options.headers ||= {});
        if (Array.isArray(headers)) {
          headers.push(['X-Localization', localeCookie.value]);
        } else if (headers instanceof Headers) {
          headers.set('X-Localization', localeCookie.value);
        } else {
          headers['X-Localization'] = localeCookie.value;
        }
      }
    },
  });

  // Expose to useNuxtApp().$api
  return {
    provide: {
      api,
    },
  };
});

Composable

import type { UseFetchOptions } from 'nuxt/app';

export function useAPI<T>(
  url: string | (() => string),
  options?: Omit<UseFetchOptions<T>, 'default'> & { default?: () => T | Ref<T> },
) {
  return useFetch(url, {
    ...options,
    $fetch: useNuxtApp().$api,
  });
}

import type { UseFetchOptions } from 'nuxt/app';

export function useAPI<T>(
  url: string | (() => string),
  options?: Omit<UseFetchOptions<T>, 'default'> & { default?: () => T | Ref<T> },
) {
  return useFetch(url, {
    ...options,
    $fetch: useNuxtApp().$api,
  });
}

API method

import { useAPI } from '~/shared/composables/use-api';
import type { Menu } from './types';

export const getMenus = () => {
  // We call this api method in app.vue which is not re-render on locale switch
  // so we manually watch changing this cookie to trigger re-fetch with new locale
  const cookie = useCookie('i18n_redirected');
  return useAPI<{ data: { menus: Menu[] } }>('/menus', { watch: [cookie] });
};

import { useAPI } from '~/shared/composables/use-api';
import type { Menu } from './types';

export const getMenus = () => {
  // We call this api method in app.vue which is not re-render on locale switch
  // so we manually watch changing this cookie to trigger re-fetch with new locale
  const cookie = useCookie('i18n_redirected');
  return useAPI<{ data: { menus: Menu[] } }>('/menus', { watch: [cookie] });
};

7 replies

NNuxt

•Created by salomon_. on 5/28/2024 in #❓・help

How to manage 'remote' localization

Hello, In my nuxt 3 app I get content in specified locale (using header) from CMS. So almost every component needs that data. What's the best way to manage it? Fetch that data on server and store in pinia? Or nuxt has an built in api to get cached data and I can use it? Can i18n module helps in my scenario?

5 replies

NNuxt

•Created by salomon_. on 11/25/2022 in #❓・help

Correct way to get cookie from the rest api

Hello, I am wondering what's the correct place to get csrftoken from backend rest api and send to the user? I use ssr, so I want to make it on server side. So in my attempt I created server/api/csrftoken.ts where I get the token from backend, then created server/middleware/auth.ts with the following content:

export default defineEventHandler(async (event) => {
  const { csrftoken } = await $fetch('/api/csrftoken');

  setCookie(event, 'csrftoken', csrftoken);
});

export default defineEventHandler(async (event) => {
  const { csrftoken } = await $fetch('/api/csrftoken');

  setCookie(event, 'csrftoken', csrftoken);
});

But it doesn't work, I got 500 error from the Nitro. Maybe there is a correct way?

17 replies

Gaming

Programming