salomon_. Posts - Answer Overflow

I have a marketing.vue layout that wrap all pages, this layout contains Navigation.vue component which has float menu, on some pages I need to turn off the float effect, how I can do that?

5 replies

NNuxt

•Created by salomon_. on 3/26/2025 in #❓・help

Is there rewrites in middleware?

What I need to do is rewrite from website.com/rooms/:country/:region/:city to website.com/:country/:region/:city

10 replies

NNuxt

•Created by salomon_. on 3/25/2025 in #❓・help

cannot start nuxt after pnpm i

Cannot start nuxt: Cannot resolve module "vite-plugin-vue-tracer/client/record"

5 replies

NNuxt

•Created by salomon_. on 3/25/2025 in #❓・help

How to handle active link with hash and i18n module?

I have i18n module installed, I have two locales, es and ro as fallback. Also in navigation I have a links with hash. So I can't rely on router-link-active because it's always there

5 replies

NNuxt

•Created by salomon_. on 3/23/2025 in #❓・help

Fetch only once on initial page load

I have an endpoint from my backend, with important data like seo, settings etc. I fetch it server side but I notice on navigation it refetch on client side, is there a way to prevent this? I want to fetch it only on first load.

20 replies

NNuxt

•Created by salomon_. on 3/19/2025 in #❓・help

How to start fetch only when two variables in watch true?

I need to call fetch only when both values are available (not undefined)

const {} = useAsyncData(
  'tours-available-dates',
  () =>
    getAvailableNights({
      query: {
        country_id: direction.value.value,
        departure_from_date: date.value.value,
        departure_to_date: date.value.value,
      },
    }),
  {
    immediate: false,
    server: false,
    lazy: true,
    watch: [() => date.value.value, () => direction.value.value],
  },
);

const {} = useAsyncData(
  'tours-available-dates',
  () =>
    getAvailableNights({
      query: {
        country_id: direction.value.value,
        departure_from_date: date.value.value,
        departure_to_date: date.value.value,
      },
    }),
  {
    immediate: false,
    server: false,
    lazy: true,
    watch: [() => date.value.value, () => direction.value.value],
  },
);

5 replies

NNuxt

•Created by salomon_. on 3/18/2025 in #❓・help

await useAsyncData vs useAsyncData

Whats the difference await useAsyncData vs useAsyncData?

5 replies

NNuxt

•Created by salomon_. on 3/18/2025 in #❓・help

Using useCookie inside onRequest

is it safety to use useCookie inside onRequest?

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

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

      if (localeCookie.value) {
        options.headers.set('X-Localization', localeCookie.value);
      }
    },
  });
  // Expose to useNuxtApp().$apiFetch
  return {
    provide: {
      apiFetch: $apiFetch,
    },
  };
});

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

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

      if (localeCookie.value) {
        options.headers.set('X-Localization', localeCookie.value);
      }
    },
  });
  // Expose to useNuxtApp().$apiFetch
  return {
    provide: {
      apiFetch: $apiFetch,
    },
  };
});

it only works this way, if I move it up new requests doesn't get new cookie value

4 replies

DTDrizzle Team

•Created by salomon_. on 2/24/2025 in #help

Is it possible to do this transformation using `db.query`?

1 replies

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