salomon_.
salomon_.
Explore posts from servers
NNuxt
Created by salomon_. on 3/28/2025 in #❓・help
How can I detect specific page in layout?
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`?
No description
1 replies
NNuxt
Created by salomon_. on 9/10/2024 in #❓・help
Cannot render HTML string comes from external API
No description
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