Added a global error page to improve user experience during navigation issues, with localized messages and redirect options. Enhanced error handling for brand, product, and category slug composables by introducing explicit 404 responses. - Introduced `/error.vue` template for custom error displays using `NuxtError`. - Updated `useBrandBySlug`, `useProductBySlug`, `useCategoryBySlug` to throw 404 errors when data is not found. - Expanded i18n files (`en-gb.json` and `ru-ru.json`) with additional error-related translations. - Replaced plain text input with a `.search`-scoped class for cleaner styling. Enhances robustness and user feedback during navigation errors. No breaking changes introduced.
29 lines
656 B
TypeScript
29 lines
656 B
TypeScript
import { GET_BRAND_BY_SLUG } from '@graphql/queries/standalone/brands';
|
|
import type { IBrandsResponse } from '@types';
|
|
|
|
export async function useBrandBySlug(slug: string) {
|
|
const brand = computed(() => data.value?.brands.edges[0]?.node ?? null);
|
|
|
|
const { data, error } = await useAsyncQuery<IBrandsResponse>(GET_BRAND_BY_SLUG, {
|
|
slug,
|
|
});
|
|
|
|
if (!data.value?.brands?.edges?.length) {
|
|
throw createError({
|
|
status: 404,
|
|
statusText: 'Brand not found',
|
|
fatal: true
|
|
});
|
|
}
|
|
|
|
watch(error, (err) => {
|
|
if (err) {
|
|
console.error('useBrandsBySlug error:', err);
|
|
}
|
|
});
|
|
|
|
return {
|
|
brand,
|
|
seoMeta: computed(() => brand.value?.seoMeta),
|
|
};
|
|
}
|