feat: Add internationalization support for error handling and improve error page content

Author: DMVMarcio

apps/client/error.vue

@@ -1,11 +1,18 @@
 <script lang="ts" setup>
 import type { NuxtError } from '#app';
 
+const { t } = useI18n();
+
 const props = defineProps({
 	error: Object as () => NuxtError
 });
 
 const handleClear = () => clearError({ redirect: '/' });
+
+useSeoMeta({
+	title: t('pages.error.meta.title'),
+	description: t('pages.error.meta.description', { code: props.error?.statusCode })
+});
 </script>
 
 <style lang="scss">
@@ -22,18 +29,18 @@ const handleClear = () => clearError({ redirect: '/' });
 			<h1>{{ props.error?.statusCode }}</h1>
 
 			<template v-if="props.error?.statusCode === 404">
-				<h2>Page not found</h2>
+				<h2>{{ t('pages.error.errors.not_found.title') }}</h2>
 
-				<p>Sorry, the page you are looking for does not exist or has been moved.</p>
+				<p>{{ t('pages.error.errors.not_found.description') }}</p>
 			</template>
 			<template v-else>
-				<h2>Oops! An error occurred.</h2>
+				<h2>{{ t('pages.error.errors.default.title') }}</h2>
 
-				<p>Sorry, an error has occurred on the server.</p>
+				<p>{{ t('pages.error.errors.default.description') }}</p>
 			</template>
 
 			<Button @click="handleClear" theme="primary" class="mt-8">
-				<Icon name="material-symbols:arrow-back-rounded" /> Go back
+				<Icon name="material-symbols:arrow-back-rounded" /> {{ t('pages.error.back') }}
 			</Button>
 		</div>
 

apps/client/i18n/locales/en-US.ts

@@ -181,6 +181,23 @@ export default {
 			description:
 				'ZyroHub is a toolkit designed for developers, offering solutions for media conversion and manipulation. It includes a variety of essential tools, eliminating the need to install or rely on multiple software and services to accomplish common tasks.'
 		},
+		error: {
+			meta: {
+				title: 'Error {code}',
+				description: 'An error occurred while trying to access the requested page.'
+			},
+			back: 'Back to Home',
+			errors: {
+				not_found: {
+					title: 'Page Not Found',
+					description: 'The page you are trying to access does not exist or is currently unavailable.'
+				},
+				default: {
+					title: 'Oops! An error occurred.',
+					description: 'Something went wrong while trying to access the requested page.'
+				}
+			}
+		},
 		home: {
 			title: 'Welcome to',
 			description: 'Please select an option below to get started.',

apps/client/i18n/locales/es-ES.ts

@@ -182,6 +182,23 @@ export default {
 			description:
 				'ZyroHub es un conjunto de herramientas diseñado para desarrolladores, que ofrece soluciones para la conversión y manipulación de medios. Incluye una variedad de herramientas esenciales, eliminando la necesidad de instalar o depender de múltiples software y servicios para realizar tareas comunes.'
 		},
+		error: {
+			meta: {
+				title: 'Error {code}',
+				description: 'Ocurrió un error al intentar acceder a la página solicitada.'
+			},
+			back: 'Volver al Inicio',
+			errors: {
+				not_found: {
+					title: 'Página No Encontrada',
+					description: 'La página que intenta acceder no existe o no está disponible en este momento.'
+				},
+				default: {
+					title: '¡Ocurrió un Error!',
+					description: 'Algo salió mal al intentar acceder a la página solicitada.'
+				}
+			}
+		},
 		home: {
 			title: 'Bienvenido a',
 			description: 'Seleccione una opción a continuación para comenzar.',

apps/client/i18n/locales/pt-BR.ts

@@ -182,6 +182,23 @@ export default {
 			description:
 				'ZyroHub é um toolkit desenhado para desenvolvedores, oferecendo soluções para conversão e manipulação de mídia. Inclui uma variedade de ferramentas essenciais, eliminando a necessidade de instalar ou depender de múltiplos softwares e serviços para realizar tarefas comuns.'
 		},
+		error: {
+			meta: {
+				title: 'Error {code}',
+				description: 'Ocorreu um erro ao tentar acessar a página solicitada.'
+			},
+			back: 'Voltar para o Início',
+			errors: {
+				not_found: {
+					title: 'Página Não Encontrada',
+					description: 'A página que você está tentando acessar não existe ou está indisponível no momento.'
+				},
+				default: {
+					title: 'Oops! Um erro ocorreu.',
+					description: 'Algo deu errado ao tentar acessar a página solicitada.'
+				}
+			}
+		},
 		home: {
 			title: 'Bem-Vindo ao',
 			description: 'Por favor selecione uma das opções abaixo para começar.',